Menu
In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.
Preloading Web fonts #The as="font" type="font/woff2" attributes tell the browser to download this resource as a font and helps in prioritization of the resource queue. The crossorigin attribute indicates whether the resource should be fetched with a CORS request as the font may come from a different domain.
Preloading Google Fonts also reduces the loading time by around 100ms. The reason for this is DNS, TCP, and TLS load in parallel with the Google Fonts CSS file. Preloading requires you to pre-connect and use a preload link in the stylesheet.
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" />
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.
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
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.
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');
}
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;
}
Please refer to this updated answer: https://stackoverflow.com/a/46830425/4031815
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With