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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt p gt normal text from within page here and then followed by   lt span style  font-family  Arial Rounded Bold   color transparent   gt t lt  span gt   lt  p gt

User · Answer

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

User · Answer

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     lt link href  fonts css family Open Sans  rel  preload stylesheet  as  style  gt    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

User · Answer

Your head should include the preload rel as follows    lt head gt               lt link rel  preload  as  font  href   somefolder font-one woff2  gt       lt link rel  preload  as  font  href   somefolder font-two woff2  gt   lt  head gt    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

User · Answer

Use the standard CSS Font Loading API   Wait for  all  the fonts to load  and then show your content   document fonts ready then  fontFaceSet    gt        console log fontFaceSet size   FontFaces loaded         document getElementById  waitScreen   style display    none         Demo CodePen

User · Answer

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     lt link rel  preload  href   fonts myfont eot  as  font  crossorigin  anonymous    gt    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

User · Answer

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

User · Answer

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    lt link rel  prefetch  href  pathto font  gt   lt link rel  prerender  href  pathto page  gt

[javascript] Preloading @font-face fonts?

Examples related to javascript

Examples related to css

Examples related to fonts

Examples related to embedding

Examples related to font-face