How to Use Custom Fonts - Using Font-Face

Use multiple custom fonts using @font-face?

You simply add another @font-face rule:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.

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.

To use local font in HTML using font face

I made the following changes and I got the result

Quotation marks for font-family
Using of URL instead of local
Changing of "\" to "/"

Note:
Use of the local css function throws an error in the developer console saying resource is not loaded. See the modified code below.

<!DOCTYPE html><html><head><style>@font-face {    font-family: "myFirstFont";    src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");}
.harlow {    font-family: "myFirstFont";}</style></head><body><div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div><p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p></body></html>

How to add fonts to create-react-app based projects?

There are two options:

Using Imports

This is the suggested option. It ensures your fonts go through the build pipeline, get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files are missing.

As described in “Adding Images, Fonts, and Files”, you need to have a CSS file imported from JS. For example, by default src/index.js imports src/index.css:

import './index.css';

A CSS file like this goes through the build pipeline, and can reference fonts and images. For example, if you put a font in src/fonts/MyFont.woff, your index.css might include this:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

Notice how we’re using a relative path starting with ./. This is a special notation that helps the build pipeline (powered by Webpack) discover this file.

Normally this should be enough.

Using `public` Folder

If for some reason you prefer not to use the build pipeline, and instead do it the “classic way”, you can use the public folder and put your fonts there.

The downside of this approach is that the files don’t get hashes when you compile for production so you’ll have to update their names every time you change them, or browsers will cache the old versions.

If you want to do it this way, put the fonts somewhere into the public folder, for example, into public/fonts/MyFont.woff. If you follow this approach, you should put CSS files into public folder as well and not import them from JS because mixing these approaches is going to be very confusing. So, if you still want to do it, you’d have a file like public/index.css. You would have to manually add <link> to this stylesheet from public/index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

And inside of it, you would use the regular CSS notation:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

Notice how I’m using fonts/MyFont.woff as the path. This is because index.css is in the public folder so it will be served from the public path (usually it’s the server root, but if you deploy to GitHub Pages and set your homepage field to http://myuser.github.io/myproject, it will be served from /myproject). However fonts are also in the public folder, so they will be served from fonts relatively (either http://mywebsite.example/fonts or http://myuser.github.io/myproject/fonts). Therefore we use the relative path.

Note that since we’re avoiding the build pipeline in this example, it doesn’t verify that the file actually exists. This is why I don’t recommend this approach. Another problem is that our index.css file doesn’t get minified and doesn’t get a hash. So it’s going to be slower for the end users, and you risk the browsers caching old versions of the file.

Which Way to Use?

Go with the first method (“Using Imports”). I only described the second one since that’s what you attempted to do (judging by your comment), but it has many problems and should only be the last resort when you’re working around some issue.

Multiple font-weights, one @font-face query

Actually there is a special flavor of @font-face that will permit just what you're asking.

Here's an example using the same font-family name with different styles and weights associated with different fonts:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

For a full overview of this feature and the standard use take a look at this article.

EXAMPLE PEN

Custom fonts with @font-face only loads last

I've tested this locally and from my results i can say that it is definitely because of the value you've assigned each of the "font-weight" properties.

These do not exist:

medium
thin
extrathin

Change them to an appropriate weight and it will work correctly.
http://www.w3schools.com/cssref/pr_font_weight.asp

The only one that looks correct is the one set to 'normal' so it is interesting that the browser (i tested it in chrome) always loads in the last one declared...

I'm using a custom font with font-face but it does not work

Amirmohammad!

You need to use @font-face to define and use custom font.

You also can use few @font-face directives with the same font family name and different font-weight and font-style for different fonts, for instance, Roboto Bold and Roboto Regular. You need to use URLs to different font files. Look at the demo below.

I also recommend you to convert ttf files to woff2 and woff and not to use ttf if you don't need to support old browsers. ttf fonts are heavy and you probably don't need them. There're online and command line converters.

You can even define URLs to woff2 and woff at the same @font-face, just define the most modern woff2 higher than woff and other older file extensions, the browser will prioritize them from top to bottom. If the browser supports the first font extension, then it will use the first one. If not, it will use the next one and so on.

You can also try to define the path to your font absolutely, from the root folder of your site starting with a slash without a dot, like that: /Assets/font/your-font.ttf. Or you can try to use relative path from the current css file. For instance, if your font and css folders are in Assets, and the current css is in css folder, your path to the font will be ../font/your-font.ttf. Two dots mean 'go one folder level upper'.

@font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: url("./Assets/fonts/Roboto-Regular.woff2") format("woff2"),
             url("./Assets/fonts/Roboto-Regular.woff") format("woff"), 
             url("./Assets/fonts/Roboto-Regular.ttf") format("ttf");
    }
    
@font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        src: url("./Assets/fonts/Roboto-Bold.ttf") format("ttf");
    }    

body {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal; 
    /* This rule makes text typed with Roboto Regular defined with the first @font-face */
}

.h1 {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal; 
    /* This rule makes text typed with Roboto Bold defined with the second @font-face. 
    Look at different font-weight values in body and this .h1. font-families are the same. */
}

How to install custom fonts in css

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.

@font-face{ 
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}

All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

How to Use Custom Fonts - Using Font-Face

Use multiple custom fonts using @font-face?

Using custom fonts using CSS?

To use local font in HTML using font face

How to add fonts to create-react-app based projects?

Using Imports

Using `public` Folder

Which Way to Use?

Multiple font-weights, one @font-face query

EXAMPLE PEN

Custom fonts with @font-face only loads last

I'm using a custom font with font-face but it does not work

How to install custom fonts in css

Related Topics

Leave a reply

Use multiple custom fonts using @font-face?

Using custom fonts using CSS?

To use local font in HTML using font face

How to add fonts to create-react-app based projects?

Using Imports

Using public Folder

Which Way to Use?

Multiple font-weights, one @font-face query

EXAMPLE PEN

Custom fonts with @font-face only loads last

I'm using a custom font with font-face but it does not work

How to install custom fonts in css

Related Topics

Leave a reply

Using `public` Folder