In this section, we will learn what the @font-face rule is and how to use it in CSS.

CSS @font-face Rule Definition and Usage

The CSS @font-face rule is a way of defining a typeface for browsers to download if they don’t have that type of font already.

Basically, sometimes we might use a typeface in a webpage that not every browser has it! In situations like this, when a browser doesn’t have a typeface, it will try to render the content with the default typeface of that browser!

Now in order to stop browsers to use their default typeface if they didn’t have a specific type of font, using CSS @font-face rule we can specify the address of the target typeface used in a webpage so that browsers can go and download it and render the page using that typeface.

CSS @font-face Rule Syntax

@font-face{

font-family: "font-name";

src:url("font-address") format("font-format");

font-weight:value;

font-style:value;

}

CSS @font-face Rule Value

When we want to introduce a new font (typeface) to a browser, we need to declare a few properties so that browsers are able to use that typeface.

The first property is “font-family“! Using this property, we declare the name of the new typeface.

Note: the name of the new typeface should be within a single quotation or double quotation mark.

Src: We use this property to declare the address in which browsers should download the new typeface. There are two values we set for this property (use space to separate each value).

1. The first value for this property is url( ” “): using this, we actually set the URL of the typeface.
2. The second value for this property is format(” “): You should know that typefaces have multiple formats and each browsers support different types. So you need to declare the format of the typeface so browsers can figure out if they can work with the declared format or not.

List of most known typeface formats:

1. ttf/otf: from this link you can see what browsers support this format= https://caniuse.com/#search=ttf

The picture below gives you a quick overview of what you’ll see in the link above.

Here you can see those browsers and their versions that support this format are listed in a green rectangle. Those browsers and their versions that don’t support this type of format are in a red rectangle. And those that partially support this type of format are in light green rectangle.

If you want to see more information about all the versions for each browser that support or not support this type of format, you can go to “Date relative” section on the page for more details.

Here’s how it looks like for ttf/otf:

You can scroll up to see the entire versions for each browser.

1. woff: https://caniuse.com/#search=woff

Quick overview:

1. woff2: https://caniuse.com/#search=woff2

Quick overview:

1. eot: https://caniuse.com/#search=eot

Quick overview:

Note: the “format” value assigned to “src” property is optional. If you omit this value, then browsers will guess the format of the typeface based on the extension we set in the URL.

For example: src: url (“typeface.ttf”);

The declaration above means the format of the typeface is “ttf”.

The next property we declare in the declaration-block of the @font-face is `font-weight`.

We covered the CSS `font-weight` property in later sections, but in short, this property is used to bold a text.

You should know that each typeface is designed with specific font-weight in mind and we should remind browsers about the font-weight for the typeface that we’re introducing to them.

The CSS `font-weight` property is optional and if we skip this property, browsers will set the weight of the font (typeface) to “normal”.

The next property that we declare in the declaration-block of the @font-face is “font-style“:

We covered the `font-style` property in later sections, but in short, this property is used to style a text. Like make it italic or oblique.

You should know that each typeface is designed with specific font-style in mind and we should remind browsers about the font-style for the typeface that we’re introducing to them.

“font-style” property is optional and if we skip this property, browsers will set the style of the font (typeface) to “normal”.

Example: @font-face Rule in CSS

See the Pen @font-face Rule in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS @font-face Rule Work?

In the example above, we have introduced 4 typefaces for browsers to use when they are rendering the content of the page. We skipped the font-style in these 4 new typefaces, and for this reason browsers will use the default value for this property which is “normal”.

One thing you should note here in this example is the fact that we only used 2 names for these 4 typefaces.

The name “teko” is used for both typefaces in “fonts/teko/Teko-Light” and “fonts/teko/Teko-Bold” address.

The name “kalam” is used for both typefaces in “fonts/kalam/Kalam-Light” and “fonts/kalam/Kalam-Bold” address.

But the question is how browsers figure out which typeface we want to use if we set the “font-family” in an element like <p>, to “kalam” or “teko”?

In this case, browsers look into the “font-weight” of that element. If the font-weight is set to “bold” then browsers will use the “bold” version of this new typeface and if the font-weight was set to “normal” for that element (which is the default value) then browsers will use the typeface with font-weight set to normal.

Note: the last paragraph in the example above has the default font-weight value of normal, but still the content is rendered as if it was “bold”!

<p class = "teko-normal"><strong>the typeface of this paragraph is teko bold as well</strong></p>

The reason for this is that we used <strong> element within this paragraph. When we use <strong> element, browsers use bold typeface specified for the content within this element and so we see the bold typeface instead of the normal one.