Despite images and videos are now everywhere, the text remains a crucial part of the web. Indeed, it is part of the header, of the call-to-action buttons, and often it is the main content. Since the text is so important, we need to style it carefully. In this CSS Tutorial, we will see how to do that by using CSS Fonts (or custom fonts in general).
What are Fonts?
Fonts define the way text is displayed. They define how each letter should appear, and the space between letters. However, fonts don’t define the color of text, they can work with any color indeed. To be more precise, a font is a file that defines how the text is to be displayed.
Think about all the fonts you use in Microsoft Word (e.g. Arial, Times New Roman, Georgia etc.). You can use all of those in your webpages as well, through CSS.
In this CSS Tutorial, we will see how to use font files in CSS. We won’t see how to create our own font, but rather how to use in our pages fonts made by others. If you feel limited here, don’t be. There are thousands and thousands (probably millions) of fonts available. And, many of them are free to use.
Font Categories
Before we start, you may want to know some categories of fonts.
- Serif fonts have a little stroke attached to a larger stroke. Think of it as some form of decoration. As an example, take the letter “T” which has two main (larger) strokes, one vertical in the center and one horizontal at the top. Serif fonts will have little strokes at the three ends of the “T” to accentuate it. This type of font is the one you generally use for printing.
- Sans-serif fonts are the opposite of serif, they don’t have those little strokes. Instead, they focus only on the main strokes. This category is generally preferred for screens and web pages. Most notably, is pretty often the best type to use for buttons and navigation menus.
- Monospaced fonts have all the letters that all occupy the same space (one space, the same for all letters). You use those often to represent programming language code.
- Handwritten fonts are more creative and try to resemble handwriting. Use those with caution, and only in headers.
- Symbol fonts don’t represent text, they represent various types of symbols. You can use these fonts to add some icons to your website quickly.
Font Files
A Word document as a “.docx” extension, while an HTML document has a “.html” extension. What about font files, what extension do they have?
There is not a single extension for fonts that you can use in CSS. Instead, there are three popular ones: TTF, OTF, and WOFF. For you, it doesn’t matter that much, you can use any font with any of those three extensions on your website. Still, it’s worth noting some differences.
- TTF (TrueType Font) is a format created by Microsoft and Apple. It contains in a single file the details to use the font on the screen and on print. It has wide support.
- OTF (OpenType Font) is an evolution of TTF, this time from a joint effort by Microsoft and Adobe. Has wide support, starting from Windows 2000. The main advantage of this format is that the file size is generally smaller, so it’s faster to load.
- WOFF (Web Open Font Format) is the latest of the three. Mozilla designed this font specifically for web use, so it’s the fastest to load. However, it’s not that common to see around, OTF and TTF are way more common.
In case you are interested to explore the differences among different font files, you can read this article from techcybers.com.
Where To Get Fonts
Fonts are files, and we need those files if we want to use different fonts on our website. If we don’t, we will rely on the end-user having the font installed on their PC (which is never the case).
Lucky for us, there are many places on the Internet where you can get fonts, either paid or for free. Below the most popular websites you can check:
- Google Fonts offers everything for free and has a good choice. It even offers a CDN service for free (more on that later).
- DaFont has both paid and free options. It has many handwriting or particular fonts you may now want to use on a website, but that can go well when you do some custom graphic with Photoshop.
- Font Squirrel is another alternative, similar to DaFont.
Importing CSS Fonts
As we will see, we have two ways of including a font in CSS: referencing it from CSS, or referencing it from HTML.
Import a Font in CSS
That’s the most trivial approach. First, you need to have the font of your choice in any of the three extensions we know (TTF, OTF, or WOFF). Once you have this file, you should put it somewhere inside your project, typically inside some “assets” folder.
Once you have your font file in place, you need to reference it in your CSS file. We do this with the @font-face directive. Here, we tell CSS just how to load this font (that is, where the font file is). We are not telling CSS to apply this font to any piece of text.
With @font-face, we need to provide two things. First, we need to provide the name of the font, so that we can later reference it to style things. Second, we need to provide the URL where the font is located. It can be an URL on the same server (such as the assets folder), or it can even be an HTTP or HTTPS URL.
To provide the name of the font, we use font-family, while to provide the location of the file we use src.
@font-face {
font-family: 'Roboto';
src: url("../assets/Roboto-Regular.ttf")
}
There we go. We just made the Roboto font available to our website. In case you are wondering, Roboto is one of the most popular fonts over the web, and it comes from Google Fonts.
Importing a Font with HTML (via CDN)
The truth is, you cannot directly import a font (TFF, OTF, or WOFF) through HTML. However, some providers offers you a CDN and provide you with a CSS file that takes care of loading the font, and only that.
With this approach, you will load your own CSS file as you always do. On top of that, you will also load another CSS file (on an external server), which tells how to load the font.
To do that, of course, your font provider needs to make that CSS file available to you. Not all providers to that, but Goole Fonts does. Indeed, they have a very good service for that, and the fonts are very fast to load (they have many servers all around the world).
Browse to Goole Fonts and select all the fonts you want to use. Here remember, less is more, try to select only the fonts you actually use. Then, instead of “Download”, go into the “Embed” part, and select the <link> option. They will give you the exact instruction to use, copy-and-paste.
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,400&display=swap" rel="stylesheet">
In this example, we are loading the Roboto font in two of its variant: Thin (100), and Regular (400). The two numbers, 100 and 400, are in fact the two weights of the font that we are loading.
They also offer a CSS @import instruction that you can use (instead of <link>). With @import, you import a CSS file into another file. But that’s not the best way to go.
The best way to go is to import directly from HTML. That’s because the browser will start to load the font as soon as it receives the HTML (the first thing it does). This way, it doesn’t have to wait for other files to load.
Using Fonts in CSS
Once you import a font in CSS, whatever the way you use, you will want to apply it to some text. We know already from our Getting Started with CSS Tutorial that the property to do that is font-family.
With this property, you specify a list of fonts to apply. The browser will try to use the first if available, and if not the second, then the third, and so on.
p {
font-family: 'Roboto', 'Arial', sans-serif;
}
In this example, we will try to use Roboto first. If it’s not available, we will try with Arial, and if it isn’t either, we will use the default sans-serif font defined by the browser. Note that the names of fonts should be quoted.
One remark worth mentioning is the override of the font-family property. Only one font-family property can be applied to an element, so two of them coming from different selectors will not merge into one another. What does this mean? Let’s see that with an example.
* {
font-family: 'Roboto', 'Arial', sans-serif;
}
h1 {
font-family: 'Georgia';
}
The first rule applies to every element, while the second only to titles. Let’s pretend we have a title and the Georgia font is not present on the computer, nor loaded with CSS. The first selector (*) still applies to the H1 element as well, but since we have overridden the font-family property, that property is ignored from *. So, the browser won’t try Roboto after Georgia. It will just try the families defined in the font-family property that is applied. Since there is no more font here, it will use its default font (Times New Roman on Windows).
Put CSS Fonts in Practice
If you have been sticking with us for a while, you know we have a Full Stack Development course. This tutorial on CSS Fonts is part of that, so there’s an exercise for you. On the website of a pretend bakery store we are building, we should try to use some nicer fonts.
For this exercise, we should use two fonts: Lora Bold for the headings, and Roboto Regular for the body. You can find both on Golle Fonts. You should load those fonts in the fastest way possible, and apply them with generic styling (referring only to elements, without classes or IDs).
Try to do this exercise on your own. Once you finish, check the code below for the solution. Stop reading here if you haven’t finished, because from the next paragraph you will find the solution.
For the solution, first, we need to reference the fonts and we do that from HTML. That’s the best choice because it’s the faster one. Also, because of speed, we are loading only the exact fonts we need, and only in the weights we need (Lora 700, Roboto 4000). So, we apply this code to all index.html, about.html, order.html, and menu.html, inside the <head>.
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Roboto:ital@0;1&display=swap" rel="stylesheet">
Then, we apply the following style to use the fonts, and we remove the Georgia font from the body.
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', serif;
font-weight: bold;
}
And this is it. Feel free to check the full code on GitHub.com at alessandromaggio/full-stack-course. Even better, check out the changes we made for this very tutorial by looking at this commit.
Wrap It Up
Fonts are a nice way to gave your website your style. In this quick CSS Fonts Tutorial, we saw how to load and use them in the correct way. With fonts in your toolbelt, you now know pretty much how to create amazing websites.
If you are following our Full Stack Development Course, keep on learning because you have almost mastered CSS.
