Using Fonts

The first thing most web developers do after creating a .html file is to change the default font to another supported by CSS. One that doesn't make you think, "I have to change this font" every time you see it! This is a vital step because users aren't likely to scroll very far through your page if the font is poor. To access a wide range of options, you need to know how to use external fonts, which is precisely what you will learn in this topic.

Fonts

Let's start by finding out what a font actually is. And no, this is not just about the appearance of the letters: it's also about their style, weight, and size. By combining all these elements, you get what is called a font. For example, Times New Roman with Italic style and 16px size, and Times New Roman with Italic style and 10px size, are two different fonts.

As you would expect, there are CSS properties that allow you to manipulate each of these font components, such as:

• font-weight — takes either bold, bolder or lighter values. Or, 100, 200, ..., 900 values, representing increasing font weights.

• font-size — as the name suggests, this property is used to set the size of the font.

• font-stretch — enables you to, well, stretch the font. Not the space between letters but the letters themselves.

• font-family — allows you to pick one of the default CSS fonts or add an external font. More about this in the next section.

CSS has access to all the fonts installed on your OS, and using them is easy. However, it's best practice to stick to those that are available on every popular OS (Windows/Mac OS/Linux, etc.) for compatibility reasons.

External fonts

As previously mentioned, font-family is a property that allows you to add external fonts via CSS. But how can you find them? Well, there are two ways.

The first method is to access the font from somewhere on the internet, such as Google Fonts. This is the most convenient approach. All you have to do is find your perfect font and link to it using the @import annotation at the beginning of your CSS file. Now CSS knows the font, and you can use its name as a value for the font-family property.

Below is an example that shows how to connect Montserrat from Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.block{
  font-family: 'Montserrat', sans-serif;
}

Be aware that using Google Fonts can cause a performance overhead. This is because fonts often weigh a lot, so there might be a gap between the moment the page is loaded and the moment the Google Font is loaded. This delay may be minimal, but if it's noticeable, the user might see blank spaces where the font should be until loading is complete.

An alternative approach is to add the file containing your font directly to the project folder. Using the word "file" when talking about fonts may seem confusing, but it's correct because fonts are stored as files. These files have special formats: .OTF, .TTF and .FNT, but we're not going to delve further into those details. Let's discover how to use font files via CSS instead. @import won't work on this occasion, so it's time to focus on a key aspect of this topic: the @font-face annotation. You can see its formal syntax below:

@font-face {
  font-family: <family-name>;
  src: <src>;
  font-stretch: <font-stretch>;
  font-weight: <font-weight>;
  font-style: <font-style>;
}

This annotation defines all the font components: name, stretching, weight, style, and a path to the file. It groups them together to form a complete font. The font-family property inside the annotation defines the name of the font you are creating. This name can be used as the font-family value for the block.

By the way, this is how the default font looks:

Let's now imagine there is a file named montserrat-400.OTF in our project folder, and create our own font using @font-face:

<div class="block">
  <p>This is Montserrat</p>
</div>

@font-face {
  font-family: the-best-font;
  src: url('montserrat-400.OTF');
  font-stretch: normal;
  font-weight: 400;
  font-style: normal;
}

.block {
  font-family: the-best-font;
}

Here is the result:

Multiple fonts

You now understand how to add an external font to your CSS file. But what if you want to make it italic or bold, or both? The thing is, CSS doesn't know what your font looks like when it's bold or italic — it only has one file containing a single font type. So, we have to add an additional font file and annotation. Let's assume we have a file named montserrat-bold.OTF in the project folder, and create another annotation:

<div class="block">
  <p>This is Montserrat</p>
</div>

@font-face {
  font-family: the-best-font;
  src: url('montserrat-400.OTF');
  font-stretch: normal;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: the-best-font;
  src: url('montserrat-bold.OTF');
  font-stretch: normal;
  font-weight: bold;
  font-style: normal;
}

.block {
  font-family: the-best-font;
  font-weight: bold;
}

This is how the text looks now:

Fancy!

Another important thing to be aware of is that the user probably won't have the font on their machine, meaning the text will not appear on the page. The same thing could also happen if a file you try to access on a server using the @font-face src property is missing — this is unlikely, but you should always consider the possibility. Fortunately, the solution to this problem is simple. You can list several font names as values of the font-family or font property. You can see an example of how to do this below:

.block{
  font-family: the-best-font-ever, Courier, Arial, sans-serif;
}

Now, if for some reason the-best-font-ever isn't found, Courier will be applied. If Courier is also missing, Arial will join the party. And, if the Arial font is missing...No, it won't be missing because this font never lets you down. Although, if it ever did, including the generic sans-serif family will ensure the browser still uses a similar font.

Technical details

It's technically possible to use a link to a resource with the required font as a value for src inside @font-face. But if the website has already been published via a hosting service, those links will be blocked automatically. This means that it's better to use @import if you have a link and @font-face if you've got a file.

Remember that it's always best to put annotations such as @import and @font-face at the beginning of your CSS file to improve performance.

And one more important detail — you can't place @font-face inside the selector. For example, this will not work:

.block {
  @font-face {
    font-family: the-best-font;
    src: url('montserrat-400.OTF');
    font-stretch: normal;
    font-weight: bold;
    font-style: normal;
  }
  font-family: the-best-font;
  font-weight: bold;
}

Conclusion

Generally speaking, there are three possible scenarios:

1. You don't feel the need to be specific and are happy to use the default fonts.

2. Most commonly, the Google Fonts service has the font you require.

3. Neither CSS nor Google Fonts have the font you need, but you have the font file.

You can handle all of these situations in simple ways. The first case is obviously the easiest to deal with, but also very rare! The second requires the use of the @import annotation to connect the font, and the third means using @font-face to create a font based on a file.