1

I have a generic css file with all fonts the website is using (local).

Inside i have for example :

    @font-face {
      font-family: "LemonMilk";
      src: url("../fonts/LemonMilk.otf");
    }
.....
  .LemonMilk{
    font-family: "LemonMilk" ;
    font-size: 4vh;
  }

I have many many of them, but some pages need only few of them, but still i load the whole file for every page :

<head>
....
 <link rel="stylesheet"  href="../css/style.css"/>

Problem: Most of my pages will delay loading them and show system fonts for a second or 2.

Tried:

<link rel="preload" as="font" href="/style/some.otf" type="font/otf" crossorigin="anonymous">

which provide a warning message that they where loaded but never used within a few seconds of page loading. But i do use them right away.

Questions:

  1. How to reduce delay?

  2. If i include a css with all fonts, will he load also the ones i dont use?

  3. why preload didn't work ?

hkrly
  • 311
  • 3
  • 12
  • Something here https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded/32292880 –  Aug 07 '19 at 08:47

1 Answers1

1

when using @font-face in CSS, it is down to browser, how it behaves.

It's good to use external CSS sheet for declaring fonts. If this doesn't help, you could try making different CSS files with fonts for different subpages. As you mentioned, you don't use all fonts on all subpages, so it may reduce the filesize and consequently load faster. Once I was working on a project with a lot of fonts and I had similar problem. The best solution then was to base64 encode all of the fonts I used. So by that approach, all of the fonts had to be loaded before HTML was parsed and displayed. Font squirrel's webfont generator found here: https://www.fontsquirrel.com/tools/webfont-generator can be really helpful tool. If you will use it you should click "Expert" and "base64 encode". Also, for testing and seeing how your load times improve, you can check out Fontloader here: https://github.com/smnh/FontLoader . It detects when fonts of the specified font-families loaded and rendered by the browser so you can see which step is taking the most time.

Sandi Pečečnik
  • 26
  • 1
  • 2
  • 6