Web Safe Fonts

Every web page that we visit on the internet has text, either to explain something, give us indications, or tell us a story. They can also be fundamental in design and branding. As we can see, typography is essential on the web, and it’s also something that we should consider when building a website or application, for many reasons, like availability, readability, and performance.

We often question ourselves about the best font to use in a project? Or what’s the best font that I can use? And those questions are important because there are many variables we need to consider when building a website. 

• Does the font look good? 
• Will the client need to download the font? 
• Does it load fast? 
• Is it readable on smaller devices?

And the question of what’s the best font for the web? is a bit vague, and we can narrow it down to what font is safe to use?. By safe, I mean which fonts we can use that we know will always be displayed even if the font is not installed on the user device.

W3C has a list of fonts considered safe because they are already part of the operating system, and with that, the website doesn't need to do anything else to present the content, text.

Here is the list of fonts that W3C considers safe:

• Arial
• Verdana
• Helvetica
• Tahoma
• Trebuchet MS
• Times New Roman
• Georgia
• Garamond
• Courier New
• Brush Script MT

So we already have some fonts that are considered safe to use on the web. Use these as the starting point because they guarantee that the website will work on every device on the web (regardless of a user location, bandwidth, browser settings, or device).

Sure, no worries, we can still use it, just use a couple of other web-safe fonts as a fallback. That way, it’s guaranteed that the website can still display its content if something weird happens.

How to do that? Well, that’s simple enough. We just need to define that on the CSS property font-family.

Font-family: Roboto, Arial, Helvetica, sans-serif;

The order the fonts appear in the property matters. The browsers will try to apply the fonts from left to right, which means that Roboto will have higher precedence over Arial, Arial higher priority over Helvetica, and so forth.

With this CSS line of code, we are already telling the browsers what order of fonts to display the text.

But what if the system or browser doesn’t have a given font yet? Well then, we need to tell the browser to download the font, and that’s done in the head of the document or through the @font-face CSS property. But, more on that a bit later.

Meanwhile, while the browser is busy downloading the font, the page could display the content with another font that it already has, right? And for that, we need to tell it explicitly with the font-display CSS property. And it’s already supported by all major browsers.

@font-face {  font-family: ExampleFont;  src: url(/path/to/fonts/examplefont.woff) format('woff'),       url(/path/to/fonts/examplefont.eot) format('eot');  font-weight: 400;  font-style: normal;  font-display: fallback;}

In this example, while the browser downloads the font, it knows that it can fall back to another font. And that’s good because that way, the content is displayed in another font, and when the correct font is downloaded, it will swap it.

Font-display can take five values, auto, block, swap, fallback, and optional. 

• With auto, we let the browser handle the situation, which is the same as a block in most cases.
• Block instructs the browser to hide the content until the font is completely downloaded and then apply the correct font.
• Swap tells the browser to fall back to another font while downloading the other one.
• The fallback value acts as a middleman between auto and swap, initially will hide the text for a certain amount of time (milliseconds), and if the font is not yet available, it will swap to a fallback font.
• Finally, the optional is similar to fallback with the difference that it will use the user connection speed to determine if the custom font will ever be downloaded or not—falling back to another font in cases where the internet connection is slow.

This is already good, we can have a custom font declared, and we can tell the browser to fall back to another font when needed. And instead of handling the custom font that we want to display on the web, we can rely on other services to do that for us.

You see, having to handle ourselves the several font types (WOFF, EOT, SVG, etc.) it’s a burthen and services like Google Fonts are helpful in these cases, because they will serve the up-to-date font and the most performant and better format for the browsers that are asking the font.

For further optimization on loading fonts, check out the Fast Web Fonts blog post with a step-by-step guide on how to accomplish this.

Is it a good idea to use fonts from Google Fonts? Well, why not? First, they have lots of fonts to choose from, and what font is more in brand with your company or the one you like more. 

Second, it will give you that code that you need to add to your website. E.g., I can choose Robot font, with variants 300, 400, and 700, and it will immediately tell me that the code that I need to add is this one:

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

font-family: 'Roboto', sans-serif;

As you can see, the links will go in the head of your document, telling the browser to pre-connect to google APIs and then download the Roboto font with the different weights and use the display swap! Finally, I just need to add it to my CSS file.

it’s always a good idea to have fallback fonts in the declared font family of our CSS, so that content will display while the browser is downloading some other font. It’s also good for users with different browser settings, so they will still be able to read your website content. And it will help you with your web core vitals score.