Delay loading my webfont

Question

On my website I have a webfont hosted on my server and for a few weeks I realized that in Chrome, once loaded all the content of the page, it takes less than a second to load the font. Is there a way to optimize the load without delay?

I am loading the font by CSS in the following way:

@font-face {
    font-family: 'webfont';
    src: url('/global/fonts/webfont-regular-webfont.eot');
    src: url('/global/fonts/webfont-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/global/fonts/webfont-regular-webfont.woff2') format('woff2'),
    url('/global/fonts/webfont-regular-webfont.woff') format('woff'),
    url('/global/fonts/webfont-regular-webfont.ttf') format('truetype'),
    url('/global/fonts/webfont-regular-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

Here the demo:

pls see https://stackoverflow.com/questions/4712242/wait-for-fonts-to-load-before-rendering-web-page — spqa, Jul 25 '18 at 01:47
Does this answer your question? [Wait for fonts to load before rendering web page](https://stackoverflow.com/questions/4712242/wait-for-fonts-to-load-before-rendering-web-page) — Lirianna, Nov 18 '20 at 21:29

score 0 · Answer 1 · answered Jul 25 '18 at 02:55

(function(){
  // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    var r = document.getElementsByTagName('script')[0];
    r.parentNode.insertBefore(s, r);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000);
  }
})();

Delay loading my webfont

1 Answers1