Web Safe Fonts

Every web page we visit on the internet has text 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 we should consider when building a website or application for many reasons, like availability, readability, and performance.

But first, let's cover some basic fonts theory.

Learn, build and grow your headless commerce with tips and tricks delivered to your inbox!

Web fonts can be categorized based on several criteria, including file format, licensing, and design style. Let's cover them really quickly.

• TrueType Fonts (TTF): TrueType is a highly flexible, scalable font format created by Apple, which ensures that the text appears precisely the same across all platforms.
• OpenType Fonts (OTF): Developed by Microsoft and Adobe, OpenType is an extension of TrueType, incorporating additional features like support for international character sets and small caps.
• Web Open Font Format (WOFF): WOFF is a web-specific font format that is essentially a compressed version of TrueType or OpenType fonts, facilitating faster load times.
• Web Open Font Format 2 (WOFF2): An improvement over WOFF, WOFF2 offers better compression, thus ensuring quicker page loads.
• Embedded OpenType Fonts (EOT): EOT, developed by Microsoft, is a compact form of OpenType fonts designed specifically for web use with information embedded for font security.
• Scalable Vector Graphics Fonts (SVG): SVG fonts allow for vector graphics for fonts, although they are not recommended for web use due to lack of support across modern browsers.

• Free Fonts: Free fonts are available at no cost, but they may have restrictions on usage, modification, or distribution.
• Open Source Fonts: Open source fonts are not only free to use, but they also allow for modifications and are often hosted on platforms like Google Fonts.
• Commercial Fonts: Commercial fonts require a license purchase for usage, ensuring high quality and unique typography.
• Custom Fonts: Custom fonts are bespoke creations for specific brands or projects, ensuring a unique visual identity.

• Serif Fonts: Serif fonts have small lines or strokes attached to the ends of letters, providing a traditional and formal appearance.
• Sans-Serif Fonts: Sans-serif fonts lack the lines or strokes at the ends of letters, offering a modern, clean look.
• Script Fonts: Script fonts mimic handwriting or calligraphy, adding a personal or elegant touch.
• Monospaced Fonts: Every character in a monospaced font occupies the same horizontal space, which is essential for code readability.
• Display Fonts: Display fonts have unique characteristics, making them suitable for headings, banners, or other prominent text elements.

• System Fonts: System fonts are pre-installed on a user's computer, allowing for faster rendering but limiting design choices.
• Web Safe Fonts: Web-safe fonts are a subset of system fonts that are common across most operating systems, ensuring consistent rendering on different devices.
• Web Fonts: Web fonts are downloaded from the server to the user’s device when a webpage is accessed, expanding design options but potentially increasing load times.
• Responsive Fonts: Responsive fonts adjust dynamically based on the viewing environment, ensuring readability and a good user experience across various devices and screen sizes.

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 essential 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?

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 (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

So, we already have some fonts 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's 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 need to define that on the CSS property font-family.

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

The order in which 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 has higher priority over Helvetica, and so forth.

With this CSS line of code, we already tell the browsers what 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 downloading the font, the page could display the content with another font 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. That’s good because 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, it 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 declare a custom font and tell the browser to fall back to another font when needed. 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 several font types (WOFF, EOT, SVG, etc.) is 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 many fonts to choose from, and what font is more in brand with your company or the one you like more? 

Second, implementing Google Fonts is a straightforward process. You'll get a simple code that you need to add to your website. E.g., you 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, you need to add it to your CSS file.

Finally, being an open-source platform, Google Fonts enjoys robust community and developer support. This fosters continuous improvement, bug resolution, and the availability of resources for troubleshooting and learning.

Downsides? Well, while Google Fonts prioritizes performance and ease of use, it’s prudent to consider privacy implications. As with many web services, usage of Google Fonts may involve data transmission to Google servers, which could be a consideration for projects with stringent privacy requirements.

Utilizing web-safe fonts is a prudent practice in web development, providing a harmonious blend of reliability, performance, and user experience.

They are a subset of fonts that are pre-installed across most operating systems, which guarantees that the text will appear as intended, regardless of the user's device or browser, ensuring cross-platform consistency.

By being locally stored on the user’s device, there is no need for additional server requests to fetch font files. This significantly enhances performance and page load time, a critical metric affecting user engagement and search engine rankings.

Web-safe fonts tend to encompass highly legible and established typefaces, which enhance readability and accessibility and provide legal assurance. This is crucial for catering to a diverse user base, including individuals with visual impairments.

Web-safe fonts are a pragmatic choice for projects where reliability, performance, and ease of implementation are paramount. Still, 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.