Custom fonts come at a cost.

If you use non-system fonts with different font weights, the size of the font files will be huge. The browser will need extra time to download them. And it’ll give you two main problems:

1. Browsers can hide the text until the custom font is downloaded. This problem called “flash of invisible text” or FOIT.
2. Browsers can show you the default system font until the custom font is downloaded. This is called “flash of unstyled text” or FOUT.

This allows web pages to load faster, but it ruins the user experience.

You might think, “What is the problem? It’s just a few seconds. At least the user can see something, right?” But what happens if a user is on a slow connection and the font takes tens of seconds to download? Or what if the font never loads at all? The user experience will be ruined forever.

But don’t worry. This damage can be prevented.

CSS has three properties that can help with optimizing custom fonts on your website.

1. font-display

The font-display property defines how font files are loaded and displayed by the browser.

Values

The font-display property accepts five values:

• auto (default): Allows the browser to use its default method for loading. Often behaves as a block property.
• block: The browser hides the text until the font has fully downloaded. The browser draws the text with an invisible placeholder (text is invisible), then swaps it with the custom font face as soon as it loads. You get a FOIT (flash of invisible text).
• swap: The browser uses the fallback font to display the text until the custom font has fully downloaded. There is no block period. The text is shown immediately. You get a FOUT (flash of unstyled text).
• fallback: Acts as a compromise between the auto and swap values. The browser hides the text for about 100ms, and if the font has not yet been downloaded, the browser uses the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably three seconds).
• optional: Like fallback. However, this value also allows the browser to determine whether the custom font is even used at all, using the user’s connection speed as a determining factor whereby slower connections are less likely to receive the custom font.

What to use

For main body text, go with optional. Users will get fast content, and if the web font download takes too long, they won’t get a page re-layout halfway through reading your article.

Browser support

Browser support is great: 90.49%.

2. text-rendering

The text-rendering property provides information to the rendering engine about what to optimize for when rendering text.

It’s an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.

The text-rendering property only works on Windows and Linux.

Values

• auto: browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.
• optimizeSpeed: The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures and sometimes turns off anti-aliasing. (In typography, kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result)
• optimizeLegibility: The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures and usually apply anti-aliasing or font hinting to display the most legible text.
• geometricPrecision: The browser emphasizes geometric precision over rendering speed and legibility. Usually, this option causes the browser to not use hinting.

What to use

There is no clear suggestion here. If you view the source code of big websites, you’ll see that they use optimizeLegibility.

Browser support

Browser support is great: 90.16%.

3. font-smooth

The font-smooth property controls font anti-aliasing while rendering.

font-smooth is currently not on the standard track and works only on the macOSX platform. It shouldn’t be used without careful consideration.

WebKit implements something similar with a different name (-webkit-font-smoothing) and different values (none, antialiased, and subpixel-antialiased).

Firefox implements something similar with a different name (-moz-osx-font-smoothing) and different values (auto, inherit, unset, grayscale).

WebKit values

• auto: Let the browser decide. Often uses subpixel anti-aliasing when available.
• none: Turn font smoothing off. Display text with jagged sharp edges.
• antialiased: Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
• subpixel-antialiased: On most non-retina displays, this will give the sharpest text.

Firefox values

• auto: Allow the browser to select an optimization for font smoothing, typically grayscale.
• grayscale: Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. Similar to the WebKit antialiased.

What to use?

Try to experiment with font smoothing. It may have a large effect on content readability. Big web sites often use antialiased and grayscale. But it often leads to overly thin text with smaller weights.

Browser support

Browser support is great: 93.16%.

In the End…

Thank you for reading. I hope this article was helpful to you.

🔴 If you like this article share it with your friends and check me on Twitter.

🔴 🔴 Every week, I send out my “3-2-1” newsletter with 3 tech news, 2 articles, 1 advice, and 1 Secret BONUS for you. Join my 3-2-1 Newsletter