Using a Custom Font with CSS

Using custom fonts using CSS?

Generically, you can use a custom font using @font-face in your CSS. Here's a very basic example:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}

Then, trivially, to use the font on a specific element:

.classname {
    font-family: 'YourFontName';
}

(.classname is your selector).

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

Adding custom fonts in CSS

Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css folder - it would work.

If you want to go back in folder structure just use ../. It's useful if you want to store images for example in /img and not in /css/img.

@font-face{
    font-family: league_spartanregular;
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Not able to use this custom font in css

Here is the code of CSS. if you need any help please let me know. and also add the font folder to your path. Hope it will work.

@font-face {
font-family: 'Conv_Megatron';
src: url('fonts/Megatron.eot');
src: local('☺'), url('fonts/Megatron.woff') format('woff'), url('fonts/Megatron.ttf') format('truetype'), url('fonts/Megatron.svg') format('svg');
font-weight: normal;
font-style: normal;

}

.demo
{
    font-family:'Conv_Megatron',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:left;
    border:1px solid #666;
    padding:10px;
}

<div class="demo" style="font-size:25px">
    The quick brown fox jumps over the lazy dog.
</div>

Using Custom font in HTML/CSS

Make a font face:

@font-face {
    font-family: 'Typogrotesk'; /*a name to be used later*/
    src: url('TheURLToTheFontFile'); /*URL to font*/
}

Then to use it in your css styling:

.example {
    font-family: 'Typogrotesk';
}

Credit: @Chris at this link

Using custom font in django Css

The Problem is, that you never assign the loaded Font to any Element. You have to add it like

body {
    font-family: "FiraCode-Retina", sans-serif;
    margin: 0px;
    background-color: aliceblue;
}

Only the @font-face declaration is not enough.

using custom font in css using zip file in react application

You can load custom fonts using @font-face.

This article shows really well how to do this.

Add the font to your project and reference it inside your .css file to be able to use it.

How to load a custom web font face from my server using link href=... format inside the header tags

You can not load a font directly in HTML, you need help of CSS for this. And if you open the google font link you will be able to see how it's done.

https://fonts.googleapis.com/css?family=Roboto:300,400,500

This url is a css file not a font file.
Open it and you will understand how google used @font-face to load the font.

Here is the documentation from mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

---

Related Topics