Loading Web Fonts with the Web Font Loader | CSS-Tricks (2022)

Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have been downloaded. Many designers and developers argued that the default font loading method called the “Flash of Unstyled Text”, or FOUT, was an annoyance to users. This is when the fallback web font, say Georgia, is shown on screen first then replaced by a custom font when it loaded. They argued that it would make for a more cohesive browsing experience if users simply waited for everything to download instead of experiencing this flash from one typeface to another.

But today this is not the case.

In fact, this practice of letting a browser hide all the text that should be styled with a custom font is now called the ‘Flash of Invisible Text’, or FOIT, and is often regarded as the worst of all possible options. Scott Jehl has argued that this is a pretty bad idea for both performance and usability:

The FOIT tends to be most problematic in browsers like iOS Safari, which hides text for up to 30 seconds before giving up and rendering it with a default font, but it can also be seen in browsers with shorter hiding durations like Chrome, Firefox, and Opera as well.

Likewise, the Typekit help page on the matter states that “the FOUT approach makes for more immediately usable pages, particularly on slower network connections.” So as designers and developers we have to make a decision between FOUT or FOIT.

(Video) Font Loading Performance 📉 6 Experiments with FOUT & FOIT

Flash of Invisible Text

  1. Font starts downloading
  2. Text is invisible whilst web font is requested
  3. Time passes very slowly
  4. Web font loads
  5. Text with the webfont appears

Flash of Unstyled Text

  1. Font starts downloading
  2. Immediately show text with font-family fallback
  3. Web font loads
  4. Text with fallback font is replaced with the web font

The difference between these two approaches is often startling. Scott mentions that the FOIT approach caused the text on the Filament Group website to be visible in 2.7s on a 3G connection whereas the FOUT approach made the text visible in 0.6s. If we want to make our interfaces feel as fast as possible then we need to use the FOUT method; user experience and network performance is definitely the main priority with this technique.

Problems with the FOUT approach

This approach certainly has several disadvantages. For example, when the switch between fallback and fancy font occurs there can be an awful lot of juddering and jankiness due to differences in font-weight and x-height. Consequently a company may only want to communicate in a certain typeface for branding reasons but with this FOUT technique that’s obviously impossible.

Sometimes these disadvantages can be mitigated. Take a look for instance at Bram Stein’s website where the slight flash of unstyled text is instantaneous and the format of the page stays almost exactly the same before and after the loading has completed. Also, if we want to use a display typeface in which we can’t find a suitable fallback font then perhaps we can use SVG to display that text instead.

Walking through the FOUT technique

I’ve been experimenting with the Web Font Loader lately which gives developers a little more control as to how fonts are treated throughout the FOUT. First, we need to embed the Web Font Loader code into our markup:

(function(d) { var wf = d.createElement('script'), s = d.scripts[0]; wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js'; s.parentNode.insertBefore(wf, s);})(document);

This asynchronously loads the script onto the page, so you can add it just before the body ends, or in the head and the rest of the resources won’t be blocked. This technique is useful for the IE9 support, but if that’s not important for our project then we can use this method instead:

(Video) How to Load Web Fonts in 2019 🎆

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

Once we’ve got the script we can then add our fonts. In this side project I was experimenting with fonts that are served with @font-face from the Typonine foundry which we add as a link in the head of our markup:

<link rel="preconnect" href="https://fonts.typonine.com/" crossorigin>

preconnect is useful here because it will automatically make the network handshake for us; before we request the fonts from our script we already have all the information the browser needs to fetch those assets which will make that process just a little bit quicker. (Thanks to Ilya Grigorik for suggesting that we use the crossorigin attribute here as well.)

Now we can begin to check whether these fonts have loaded onto our page by using the WebFontConfig object:

WebFontConfig = { custom: { families: [ 'Nocturno Display Medium 3', 'Nocturno Book 2', 'Nocturno Regular Italic 24', 'Nocturno Regular 26', 'Nocturno Regular 25' ], urls: [ 'https://fonts.typonine.com/WF-000000-001254.css', 'https://fonts.typonine.com/WF-000000-001255.css' ] }, timeout: 2000};

The custom object lets the Web Font Loader know that we want to load fonts from an external stylesheet, but with this loader we can use fonts from Typekit, Google, Fontdeck, or Fonts.com if we want to. With the families array we’re identifying all of the font-family names that we would otherwise use directly in the CSS.

You might notice that I’ve set a timeout of 2 seconds. That’s a completely subjective figure, but I think that’s plenty of time to make a request to the network—any longer than that and the user is probably on a poor connection and all they want is the content anyway.

(Video) Google Web Font Loader Overview

Once the loader has finished with loading those fonts it will add these classes to the html element:

<html class="wf-nocturnoregularitalic24-n4-active wf-nocturnoregular26-n4-active wf-nocturnoregular25-n4-active wf-nocturnodisplaymedium3-n4-active wf-nocturnobook2-n4-active wf-active"> <!-- markup for the website goes here --></html>

These classes are the hooks we need to style the page depending on whether the fonts have loaded or not. There are more classes that can be added to help us however:

  • loading: triggered when all fonts have been requested.
  • active: triggered when the fonts have rendered.
  • inactive: triggered when the browser does not support linked fonts or if none of the fonts could be loaded.
  • fontloading: triggered once for each font that’s loaded.
  • fontactive: triggered once for each font that renders.
  • fontinactive: triggered if the font can’t be loaded.

Over in our stylesheet, we can now set the right family with the .wf-active class:

$fallback: Georgia, serif;h1, .h1 { font-family: $fallback; .wf-active & { font-family: "Nocturno Display Medium 3"; }}

So now our users will immediately see the fonts contained in the $fallback variable but once our .wf-active class is added by the Web Font Loader then those fonts will be switched out for the fancy web font. We’re now taking a progressive enhancement approach to font loading.

Avoiding the jank

One problem I noticed was that once these fonts had loaded then the number of words that fit onto a line changed and certain elements were too wide or too small because of these new additions to the page.

(Video) Loading fonts correctly with CSS | Web Design Tutorial

To fix this we can always set a different font-size and line-height combination to make this a smoother experience:

h1, .h1 { font-size: 30px; line-height: 35px; font-family: Georgia, serif; .wf-active & { font-size: 26px; line-height: 30px; font-family: "Nocturno Display Medium 3"; }}

Minimising the flash of unstyled text

After the first page load, The Filament Group recommends setting a cookie so that we don’t have that flash of unstyled text whilst the .wf-active class is applied to the markup each time. But in my experiment I was just using plain, static markup so the cookie option wasn’t really available. Instead, I used one of the many events available in the Web Font Loader to update sessionStorage, like this:

WebFontConfig = { // other options and settings active: function() { sessionStorage.fonts = true; }}

Don’t forget to take a look at the full list of available events. But with this particular event we can immediately check in the head of the document whether that key exists in the sessionStorage and, if it does, we can then add the class name to the html element as quickly as possible:

<head> <script> (function() { if (sessionStorage.fonts) { console.log("Fonts installed."); document.documentElement.classList.add('wf-active'); } else { console.log("No fonts installed."); } })(); </script></head>

This doesn’t entirely block the flash of unstyled text which is probably going to be an issue either way, but it’s certainly an improvement on FOIT.

Font loading is crucial for good typography

After playing around with this technique I found that the experience completely changed my view about what good typography on the web is.

(Video) How to host your own fonts made simple

But if you happen to have any ideas on how to improve the method shown above then please let us know about them in the comments.

FAQs

How do I load a font into a website? ›

How to add custom fonts to your website using @font-face
  1. Step 1: Download the font. ...
  2. Step 2: Create a WebFont Kit for cross-browsing. ...
  3. Step 3: Upload the font files to your website. ...
  4. Step 4: Update and upload your CSS file. ...
  5. Step 5: Use the custom font in your CSS declarations.
12 Aug 2021

How do I add fonts to Typekit? ›

Calling "Typekit. load" without any arguments will trigger font loading. You can also pass a configuration object to Typekit. load.

What is font loading? ›

When web fonts are loading, we hide text so users don't see anything. We only show the text when web fonts are loaded. FOUT means flash of unstyled text. When web fonts are loading, we show users a system font. When the web font gets loaded, we change the text back to the desired web font.

How do you fix Fout? ›

The best way to deal with FOUT is to make the transition between the fallback font and web font smooth. To achieve that we need to: Choose a suitable fallback system font that matches the asynchronously loaded font as closely as possible. Adjust the font styles ( font-size , line-height , letter-spacing , etc.)

What is web font Loader? ›

The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.

How do I load a font? ›

Add a font
  1. Download the font files. These often come compressed in . ...
  2. If the font files are zipped, unzip them by right-clicking the . ...
  3. Right-click the fonts you want, and click Install.
  4. If you're prompted to allow the program to make changes to your computer, and if you trust the source of the font, click Yes.

How do I know if a font is loaded? ›

check() The check() method of the FontFaceSet returns whether all fonts in the given font list have been loaded and are available.

How do I load a font into JavaScript? ›

Now, to import a font, simply add a stylesheet or <style> element to the DOM, which has a font-face rule: var link = document. createElement('link'); link. setAttribute('rel', 'stylesheet'); link.

Should I preload all fonts? ›

If you use multiple fonts, it might be tempting to preload every font that you use in every format. However, there are performance tradeoffs to using font preloading. With preload, you're essentially forcing browsers to make a high-priority request for the font URL whether or not it's needed.

How do I optimize web fonts? ›

  1. The number of fonts matters. ...
  2. Load fonts locally. ...
  3. Use modern font formats. ...
  4. Limit the number of loaded font variants. ...
  5. Optimize the font in before you use it on your website. ...
  6. Only need a few specific character? ...
  7. More decorations - larger sizes. ...
  8. font-display: swap.
2 Aug 2021

How do I make my fonts load faster? ›

5 steps to faster web fonts
  1. Use the most modern file formats.
  2. Use the font-display descriptor. swap. block. fallback. optional.
  3. Preload your font files.
  4. Subset your font files.
  5. Self-host your fonts.
12 May 2021

What is Fout web? ›

A “flash of unstyled text” is the phenomenon in which a web page loads with the type set using system fonts before switching to the intended typeface(s). This delay is caused by the web fonts being downloaded to the user's device.

How do I preload a font face? ›

It is most useful for font preloading (not waiting for the browser to find it in some CSS).
...
  1. It's good to add the following attributes type="font/woff2" and crossorigin to <link> to prevent browser errors. ...
  2. When I try this, the font will be loaded twice.

How do I preload Google fonts? ›

So let me share how to serve web fonts in the fastest speed as of early 2021, step by step.
  1. Step 1: Preconnect the web font server. Start with. ...
  2. Step 2: Preload the web font stylesheets. Next line of code is something like this: ...
  3. Step 3: Fallback for old browsers. ...
  4. Step 4: Fallback for JavaScript-disabled users.
1 Feb 2021

Does TTF work on all browsers? ›

TrueType Font (TTF)

TTF has long been the most common format for fonts on Mac and Windows operating systems. All major browsers have supported it.

Should I cache fonts? ›

Proper caching is a must #

You should not store fonts using localStorage or IndexedDB; each of those has its own set of performance issues. The browser's HTTP cache provides the best and most robust mechanism to deliver font resources to the browser.

How do I optimize a TTF file? ›

  1. start FontForge and open your ttf font file.
  2. go to Edit -> Select -> Select By Script.
  3. on the pop up selection window chose Cyrillic from the drop down menu. ...
  4. go to Encoding -> Detach & Remove Glyphs, confirm the question.

How do I use a font I downloaded? ›

How to Install Fonts on a PC
  1. Shut down any program you want to use the font in.
  2. Download the font to your computer and open zip files if necessary. It may have a . zip, . otf, or . ...
  3. Right click on each font you'd like to add, then choose "Open."
  4. Once open, click “Install” to add the font to your computer.
5 Jun 2013

What is difference between OTF and TTF? ›

OTF and TTF are extensions that are used to indicate that the file is a font, which can be used in formatting the documents for printing. TTF stands for TrueType Font, a relatively older font, while OTF stands for OpenType Font, which was based in part on the TrueType standard.

How do I install a font in Windows 10? ›

  1. Open the Windows Control Panel.
  2. Select Appearance and Personalization. RECOMMENDED VIDEOS FOR YOU... ...
  3. At the bottom, select Fonts. ...
  4. To add a font, simply drag the font file into the font window.
  5. To remove fonts, just right click the chosen font and select Delete.
  6. Click Yes when prompted.
1 Jul 2018

How do I see what fonts are rendered in Chrome? ›

Chrome Developer tools can show you the exact rendered fonts for a given web page with just a few clicks. Right click on any element in the page and select Inspect. Next head over to the Computed tab, scroll down, and you'll quickly notice the rendered fonts for the page.

How are fonts rendered? ›

Font rasterization is the process of converting text from a vector description (as found in scalable fonts such as TrueType fonts) to a raster or bitmap description. This often involves some anti-aliasing on screen text to make it smoother and easier to read.

How do I convert TTF to WOFF? ›

How to convert TTF to WOFF
  1. Upload ttf-file(s) Select files from Computer, Google Drive, Dropbox, URL or by dragging it on the page.
  2. Choose "to woff" Choose woff or any other format you need as a result (more than 200 formats supported)
  3. Download your woff.

What is the difference between desktop and Web fonts? ›

Desktop fonts often have special OpenType features that give the user flexibility in designing with them. A webfont is a specially tuned font for use on websites using the CSS @font-face declaration. The Fontspring webfonts have no OpenType features and often have extraneous glyphs removed.

How do I import a TTF font into CSS? ›

  1. Adding . ...
  2. Download . ...
  3. Create a HTML file: Create a HTML file and add a h2 tag for demonstrating our font style.
  4. Create a CSS file: For adding external fonts through CSS, we use the @Font-face attribute property to manually define font name and giving source file. ...
  5. Final result: This is how our font look on the browser.
13 Aug 2021

How do you use Typekit? ›

How to Use Typekit Desktop Fonts | Adobe Creative Cloud - YouTube

What is a typekit CSS? ›

Typekit is Adobe's hosted web font service. The CSS or JavaScript file which loads the web fonts and the web font files themselves are added to your website in the browser from our content delivery network (CDN), use.typekit.net.

Are Adobe Fonts Web fonts? ›

Font licensing for Adobe Fonts includes web and desktop use for everything in the font library, as long as you have an active Creative Cloud subscription.

How do I preload an image in HTML? ›

To preload responsive images, new attributes were recently added to the <link> element: imagesrcset and imagesizes . They are used with <link rel="preload"> and match the srcset and sizes syntax used in <img> element.

What is preload and prefetch? ›

preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document's onload event. Prefetch is a hint to the browser that a resource might be needed, but delegates deciding whether and when loading it is a good idea or not to the browser.

What is preload in WordPress? ›

What is preloading of WordPress pages and posts? Preloading means that pages and posts from your WordPress website will be loaded “in the background” before your visitor clicks them. Suppose a visitor visits your homepage. In your menu and on the page itself there are various links to other pages and messages.

How do I use FontFaceObserver? ›

To load a font, call the load method on a FontFaceObserver instance. It'll return a promise that resolves when the font loads, or rejected when the font fails to load. var font = new FontFaceObserver('Output Sans'); font.

How do I import Google fonts into next JS? ›

How To Add Google Fonts to Next JS - No Errors - YouTube

How do I preload fonts in Nextjs? ›

Here's the code I have in Next@10.0.5 - to preload both external and internal fonts.
...
As for the internal fonts that you have in your public folder, this requires;
  1. file-loader configuration in next. config. js , this is to resolve the hashed filename.
  2. Type definition for the fonts.
  3. Then import it into your head.
21 Jul 2020

Do Google fonts slow down website? ›

Google Fonts page speed impact

Using the recommended method to add a Google Font into a webpage can slow a page load by a whopping 780ms. The audit calls this a "render-blocking resource", which means that the page can't load until this CSS file has been fetched from the Google Fonts server, fonts.googleapis.com.

What is the difference between link and import Google fonts? ›

Linking is the first method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. It is added to the head of your HTML document. Importing allows you to import one style sheet into another.

How do I use Google fonts in HTML? ›

To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.

What is FOIT and Fout? ›

FOIT and FOUT are font loading strategies used by browsers to load custom fonts. FOIT shows an invisible text while FOUT uses a system font until the font is loaded. FOUT should be preferred over FOIT.

What is FOIT? ›

A “flash of invisible text” (FOIT) is the phenomenon in which a web page loads without the type appearing at all, before rendering to the intended typeface(s). This delay is caused by the web fonts being downloaded to the user's device. See also: FOUT.

What is flash of unstyled content How do you avoid FOUC? ›

In an attempt to avoid unstyled content, front-end developers may choose to hide all content until it is fully loaded, at which point a load event handler is triggered and the content appears, though an interruption of loading might leave behind a blank page, to which unstyled content would be preferable.

What does preload Web pages mean? ›

Chrome helps you open webpages faster by predicting where you might go next on the page. The browser preloads the page's data in the background, so the page can open immediately if you tap its link.

How do I know if preload is working? ›

To check whether preloading has any influence on performance, you should have a look at times and the order of the resources being loaded within the DevTools Network Monitor. Having said that, preloading actually does not work in Firefox yet (as of version 68).

What is preload in HTML? ›

The HTML preload Attribute is used to specify the way the author thinks the media should be loaded when the page loads. The preload attribute allows the author to portray to the browser about the way the user experience of a website should be implemented.

Should I preload Google fonts? ›

Without the 'preload', the browser won't download the font until it finds HTML in the page that matches a CSS rule which uses the font. In other words, it may be quite some time before the browser tries to download the font. So it's worth using 'preload' whether the font is served from your own domain or not!

How do I preload Google fonts in WordPress? ›

The Fastest Way to Load Google Fonts in WordPress
  1. Visit Google Fonts and add your fonts and style variants. Note the URL i.e., the value of href attribute. In this example, it is: https://fonts.googleapis.com/css2? ...
  2. Install and activate Code Snippets plugin. Go to Snippets > Add New. Title: Load Google Fonts from CDN.
22 May 2020

How do I preload Google font on WordPress Rocket? ›

How to use Preload Fonts
  1. Right-click on the recommended font in PageSpeed and copy the URL.
  2. Paste the URL into the "Fonts to Preload" field.
  3. The font must be hosted on your own domain, or your CDN's domain. ...
  4. The font URL must match exactly what PageSpeed provides.
23 May 2022

How do I add a new font to HTML? ›

To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

How do you add a font tag in HTML? ›

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.

How do I import a Google font into HTML? ›

To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.

How do I import a font from Google to CSS? ›

Open Google Fonts and follow these steps: Find the font and click it (a card with the font), then, click "+ Select this style". On the right side, you'll see a container with the name "Selected family". Click "Embed" and choose <link> or @import depending on where you need to add the font (in HTML or CSS).

How do I import a TTF font into CSS? ›

  1. Adding . ...
  2. Download . ...
  3. Create a HTML file: Create a HTML file and add a h2 tag for demonstrating our font style.
  4. Create a CSS file: For adding external fonts through CSS, we use the @Font-face attribute property to manually define font name and giving source file. ...
  5. Final result: This is how our font look on the browser.
13 Aug 2021

What is the use of web font in HTML? ›

An HTML web font makes sure your chosen font is rendered properly throughout any browser and device. Fallback font. If your preferred font doesn't load correctly on a person's browser, HTML web fonts will fall back to a default font found on the person's device.

Which HTML tag can be used to define font style? ›

HTML <font> tag is used to define the font style for the text contained within it. It defines the font size, color, and face or the text in an HTML document.

How many fonts are there in HTML? ›

In CSS there are five generic font families: Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. Sans-serif fonts have clean lines (no small strokes attached).

Which is correct code of font tag? ›

Size, color and typeface are defined by the size, color and face attributes. The <font> tag is a deprecated HTML tag.
...
Attributes.
AttributeValueDescription
colorrgb (x, x, x) #xxxxxx colornameSets the color of the text.
facefont_familySets the typeface.
sizenumberSets the size of the text.

How do I import a custom font? ›

How to Install Fonts on a PC
  1. Shut down any program you want to use the font in.
  2. Download the font to your computer and open zip files if necessary. It may have a . zip, . otf, or . ...
  3. Right click on each font you'd like to add, then choose "Open."
  4. Once open, click “Install” to add the font to your computer.
5 Jun 2013

Where do I put a font link in HTML? ›

Steps
  1. Copy/paste the <link> tag displayed in the “Embed Font” section into your HTML <head> tag.
  2. Then, on your CSS stylesheet add the line displayed in the “Specify in CSS” section to the class or selector that corresponds to your text.
2 Sept 2018

How do I download fonts from Google Fonts? ›

How to install Google Fonts in Windows 10
  1. Download a font file to your computer.
  2. Unzip that file anywhere you like.
  3. Locate the file, right-click, and select Install.
19 Aug 2020

Is Google Fonts an API? ›

The Developer API gives access to the metadata for all families served by Google Fonts. It allows apps to query Google Fonts for the available font families. The REST API supplies data in the JSON format that includes the styles and scripts (called subsets in Google Fonts) in each family.

How do I link to a Google font? ›

Open fonts.google.com and select the font you would like to use. Click the "+Select this style" button and select the styles you need. Copy the font link, that is the part of the code inside the quotes, in the <link> tab.

How do I add an Open Sans font in CSS? ›

Example: How to add the Open Sans font in CSS

Alternatively, you can use a CSS @import : @import url('https://fonts.googleapis.com/css?family=Open+Sans');

Videos

1. Google Web Font Loader Simple Demo
(life michael)
2. Web Fonts Loader - Load the 20 Most Popular Google Fonts - WordPress Plugin
(Krasen Slavov)
3. Temporarily Installing Fonts with Font Loader
(Indezine)
4. Web Font Loading Strategy
(Bigger Picture)
5. How to change font types, use custom fonts in salesforce lightning communities
(Tech Deep Dive)
6. HTML : Does Web Font Loader not cache the fonts?
(Knowledge Base)

Top Articles

You might also like

Latest Posts

Article information

Author: Lakeisha Bayer VM

Last Updated: 11/11/2022

Views: 5854

Rating: 4.9 / 5 (49 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Lakeisha Bayer VM

Birthday: 1997-10-17

Address: Suite 835 34136 Adrian Mountains, Floydton, UT 81036

Phone: +3571527672278

Job: Manufacturing Agent

Hobby: Skimboarding, Photography, Roller skating, Knife making, Paintball, Embroidery, Gunsmithing

Introduction: My name is Lakeisha Bayer VM, I am a brainy, kind, enchanting, healthy, lovely, clean, witty person who loves writing and wants to share my knowledge and understanding with you.