Font family

From different file types, performance, font stacks, FOUTS, and more, fonts are a very big topic that has entire courses dedicated to it.

For this course, we will be keeping things simple, and cover the most important topics to get you started with them.

• The types of fonts
• Font stacks
• @font-face

Types of fonts

• Serif fonts
• Sans-serif fonts
• monospace

There are a few other default styles that you probably won’t use too often, such as cursive and fantasy.

font-family

We can declare the font we want to use using the font-family property.

body {
  font-family: sans-serif;
}

Font stacks

When we use a font on the web, it’s possible the user who’s visiting your website doesn’t have that font installed. We can provide fonts (we’ll see that in the next lesson), but because of slow internet connections or other issues, it’s possible that font doesn’t load.

If it doesn’t load, we’d get the system default font, which might be quite different from the one you had hoped for.

For example, I may want to use a font Apercu in a project, which is a nice sans-serif font, but it doesn’t come installed on people’s computers. It is a premium font you’d have to purchase. Because my computer doesn’t know what it is, so it just uses the system default instead, which is a serif font!

This text should be the sans-serif Apercu…

This is where font-stacks come in, where I can provide fall backs in case the intended font doesn’t load.

.my-cool-font {
  font-family: Apercu, Futura, sans-serif;
}

My go to font family

If you’re not too concerned about the font family that is being used, I’d suggest using system-ui.

• font-family: sans-serif
• font-family: system-ui

Using this will mean the font will be different on different operating systems, but it will use the system fonts, which tend to be relatively nice fonts, and it has the plus that they will look familiar to the user as well.

Another advantage is that you don’t need to deal with the performance issues which can arise when you want to use specific fonts.

If you’d prefer to be a little safer, you can also use a system font font stack.