Preloading @font-face fonts?

Question

Is it possible to preload or otherwise cache @font-face fonts, most likely with javascript, before the page loads so you don't get that ugly jump when the page finally does load?

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content — Christophe Roussy, Oct 19 '17 at 13:11

score 93 · Answer 1 · edited Mar 31 '22 at 11:21

93

Since 2017 you have preload

MDN: The preload value of the element's rel attribute allows you to write declarative fetch requests in your HTML , specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/mywofffont.woff2" as="font" type="font/woff2" crossorigin>

Always check browser compatibility.

It is most useful for font preloading (not waiting for the browser to find it in some CSS). You can also preload some logos, icons and scripts.

Other techniques pro/cons are discussed here (not my blog).
Also see prefetch (similar) and SO question about preload vs prefetch.

edited Mar 31 '22 at 11:21

yeshansachithak

832
2
18
34

answered Oct 19 '17 at 12:55

Christophe Roussy

16,299
4
85
85

32

[`crossorigin` is required even if the font is loaded from the same origin](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches). Also good to provide a type hint. – Okku May 15 '18 at 11:06
@IlpoOksanen added it now – Christophe Roussy May 15 '18 at 13:02
7

but how to assign font family name to the loaded font? – Don Dilanga Apr 06 '19 at 18:08
@DonDilanga I think this is something you must do via CSS – Christophe Roussy Dec 09 '19 at 16:36
Works perfectly on Chrome 91, Safari 14, Firefox 89 & Opera 77! – Mohit Singh Jun 12 '21 at 13:22
1

@DonDilanga you only fetch the resource; when the browser stumbles into the `@font-face` declaration, then it'll know it already has the resource. – André Chalella May 29 '22 at 20:13

score 54 · Answer 2 · answered May 16 '14 at 14:48

54

A simple technique is to put this somewhere in your index:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

Tested on Chrome 34, Safari 7 and FF 29 and IE 11

answered May 16 '14 at 14:48

Rafouille

863
10
16

1

This worked perfectly in my situation to get fonts preloaded for use in fabricjs. Thanks. – Brandon Jul 23 '19 at 02:25
This works wonders in my use case (which can be arbitrarily weird when using web technologies for print): I’m trying to use a CSS font and set text in a box, but if the box overflows, I can slightly adjust the font size or letter spacing until it fits. But this can be automated: choose a minimum and a maximum letter spacing letter spacing and do a binary search between them for a decent value with which the text just about fits. But this requires `requestAnimationFrame` and maybe `setTimeouts` _and_ a **pre-rendered font**! This does the trick. Surprising that the ``s can be left empty. – Sebastian Simon May 23 '21 at 19:55
5

But I’d strongly recommend using `role="none presentation"` for accessibility reasons and `user-select: none; pointer-events: none;` so that there’s no chance of interference with user events. Maybe even `position: absolute; top: 0; transform: translateY(-100%);`. – Sebastian Simon May 23 '21 at 20:01

Serge Stroobandt · Answer 3 · 2021-07-27T11:05:01.013

Avoid FOIT: Flash Of Invisible Text

A first step, for sure, is pre-loading the font in HTML:

<link rel="preload" href="pacifico.woff2" as="font" crossorigin="anonymous">

Please, note that fonts are always pre-loaded with cross-origin resource sharing (CORS) enabled, even though the font resides on the same server:

When preloading resources that are fetched with CORS enabled (e.g. fetch(), XMLHttpRequest or fonts), special care needs to be taken to setting the crossorigin attribute on your element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.

Hence, the crossorigin="anonymous" attribute is absolutely necessary.

The same cannot be said about the optional type="MIME-type" attribute. There is much discordance between browsers and institutions about what MIME-type fonts should be. If the wrong type is stated for a certain browser, the font file will not be pre-loaded. Therefore, it is better to refrain from using the type="MIME-type" HTML attribute all together.

Then, there is what the cool kids call FOIT; the flash of invisible text. In modern browsers, this FOIT can easily be avoided by adding the font-display: swap; property to the @font-face CSS declaration.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(pacifico.woff2) format('woff2');
  font-display: swap;
}

You wrote href="pacifico.woff2" but what if I want to store the data inside data:application/x-font-woff instead of external file? — Nathan B, Nov 19 '21 at 09:59

score 24 · Answer 4 · answered Apr 24 '10 at 18:19

24

There are a few techniques for "preloading" here: http://paulirish.com/2009/fighting-the-font-face-fout/

Mostly tricking the browser into downloading the file as fast as possible..

You can also deliver it as a data-uri, which helps a lot. and also you could hide the page content and show it when its ready.

answered Apr 24 '10 at 18:19

Paul Irish

47,354
22
98
132

3

Sorry, to dig this up, but I suspect I'm not understanding something. The tips on the blog post seem to be about hiding text while the font loads, but what if I just want get e.g. Chrome to load it ASAP and not when it encounters some text with that font? Is my best option a hidden div in the ? – Eli Rose Sep 14 '16 at 03:01

score 23 · Answer 5 · answered Apr 09 '19 at 12:21

Your head should include the preload rel as follows:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

This way woff2 will be preloaded by browsers that support preload, and all the fallback formats will load as they normally do.
And your css font face should look similar to to this

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}

It's good to add the following attributes **type="font/woff2"** and **crossorigin** to to prevent browser errors. Otherwise this was the best answer for my case. — MartinG, Jul 20 '20 at 10:03
When I try this, the font will be loaded twice. Once very early for the link with preload and a second time for the @font-face decleration. — Jochen Kunze, Jan 10 '22 at 12:38
Try to add "crossOrigin" in your link, then it will load only once. — Binit Ghetiya, Apr 06 '22 at 18:07

score 4 · Accepted Answer · edited Nov 20 '20 at 13:21

4

This answer is no longer up to date

Please refer to this updated answer: https://stackoverflow.com/a/46830425/4031815

Deprecated answer

I'm not aware of any current technique to avoid the flicker as the font loads, however you can minimize it by sending proper cache headers for your font and making sure that that request goes through as quickly as possible.

edited Nov 20 '20 at 13:21

CommonSenseCode

23,522
33
131
186

answered Aug 25 '09 at 20:43

Gabriel Hurley

39,690
13
62
88

d13 · Answer 7 · 2014-09-13T20:29:58.907

Proper font pre-loading is a big hole in the HTML5 spec. I've gone through all of this stuff and the most reliable solution I've found is to use Font.js:

http://pomax.nihongoresources.com/pages/Font.js/

You can use it to load fonts using the same API you use to load images

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

It's much simpler and more lightweight than Google's hulking Webfont Loader

Here's the github repo for Font.js:

https://github.com/Pomax/Font.js

score 4 · Answer 8 · answered Jun 24 '15 at 03:53

4

Via Google's webfontloader

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});

answered Jun 24 '15 at 03:53

Razan Paul

13,618
3
69
61

The guy above you gave the exact same answer 2 years before you.. why did you bother writing it again? I'm curious – vsync Jun 01 '17 at 09:21
My answer just gives a code snippet which people can use to load multiple fonts using webfontloader. The previous answer gives a nice introduction to webfontloader, but does not contain any code snippet. – Razan Paul Jun 02 '17 at 03:25
You should have edited it instead of repeating, and adding a code example. it's very confusing and waste of scroll to have almost identical answers repeating in questions. – vsync Jun 02 '17 at 07:04

score 3 · Answer 9 · answered Jan 14 '13 at 03:35

i did this by adding some letter in my main document and made it transparent and assigned the font that I wanted to load.

e.g.

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

score 3 · Answer 10 · answered Apr 06 '19 at 18:48

As I found the best way is doing is preloading a stylesheet that contains the font face, and then let browser to load it automatically. I used the font-face in other locations (in the html page), but then I could observe the font changing effect briefly.

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

then in the font.css file, specify as following.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

You can't assign a name to fonts when it's preloaded through link tag (correct me if I was wrong I couldn't find a way yet), and thus you have to use font-face to assign the name to the font. Even though it's possible to load a font through link tag, it's not recommended as you can't assign a name to the font with it. Without a name as with font-face, you won't be able to use it anywhere in the web page. According to gtmetrix, style sheet loads at the beginning, then rest of the scripts/style by order, then the font before dom is loaded, and therefore you don't see font changing effect.

I used this solution and tbh Chrome's Lighthouse is still saying these fonts should be preloaded as if it didn't recognise they are. I am going to replace it with Andrei's solution and see if there is any difference. — nickornotto, Aug 27 '21 at 07:27

Knu · Answer 11 · 2012-04-06T04:31:44.780

2

This should solve your problem.

To answer your initial question: yes you can. Only Gecko and WebKit browsers support it currently though.
You just need to add link tags in your head:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">

edited Apr 06 '12 at 04:31

answered Jan 13 '10 at 17:45

Knu

14,806
5
56
89

You should be careful with prerendering stuff on your page. It’s not the same as prefetching. – kleinfreund Aug 09 '14 at 16:49
2

why `prerender` and not `preload` ? it's a font, not an HTML file, there's nothing to render about it – vsync Jun 01 '17 at 09:19
How to do it in CSS of @font-face? – Nathan B Nov 19 '21 at 09:55
@vsync sorry if that wasn't clear but these are two different methods. One is specific (prefetch only the font) and the other general (i.e. it will fetch the resources of that page in advance, fonts included). `rel="prerender"` has PROs (fetch several fonts at once) and CONs (fetch _all_ resources. with [caveats](https://developers.google.com/web/updates/2018/07/nostate-prefetch)). – Knu Nov 21 '21 at 22:01

score 2 · Answer 12 · answered Nov 19 '17 at 10:00

2

Use the standard CSS Font Loading API.

Wait for (all) the fonts to load, and then show your content:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Demo CodePen.

answered Nov 19 '17 at 10:00

yPhil

8,049
4
57
83

This is now very widely supported: [Font Loading API](https://caniuse.com/#feat=font-loading). More so than `font-display`: [font-display](https://caniuse.com/#feat=css-font-rendering-controls) – Sideways S Jun 10 '19 at 14:22

score 0 · Answer 13 · answered Feb 03 '13 at 19:04

Recently I was working on a game compatible with CocoonJS with DOM limited to the canvas element - here is my approach:

Using fillText with a font that has not been loaded yet will execute properly but with no visual feedback - so the canvas plane will stay intact - all you have to do is periodically check the canvas for any changes (for example looping through getImageData searching for any non transparent pixel) that will happen when the font loads properly.

I have explained this technique a little bit more in my recent article http://rezoner.net/preloading-font-face-using-canvas,686

score 0 · Answer 14 · answered Mar 07 '13 at 13:30

Google has a nice library for this: https://developers.google.com/webfonts/docs/webfont_loader You can use almost any fonts and the lib will add classes to the html tag.

It even gives you javascript events on when certrain fonts are loaded and active!

Don't forget to serve your fontfiles gzipped! it will certainly speed things up!

score 0 · Answer 15 · answered Oct 22 '22 at 06:32

0

Finding the href to put in the link tag is the hard part, I explained it in detail in this article

answered Oct 22 '22 at 06:32

Daniel Bellmas

589
5
17

score 0 · Answer 16 · answered Apr 05 '23 at 07:49

0

You can use document.fonts like so

// Wait for all fonts to be loaded
document.fonts.ready.then(() => {
  // Execute your script here
  console.log('Custom font has been loaded');
});

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

answered Apr 05 '23 at 07:49

Robin Payot

111
1
4

Preloading @font-face fonts?

16 Answers16

Avoid FOIT: Flash Of Invisible Text

This answer is no longer up to date

Deprecated answer

Linked