Animations and first load are lags because of css @fontface

user_8630901 0
Viewed 264

I have a custom font that I use with @fontface. the font is local. on the first load of the page there's a small lag and every time a new page or a component loads there is the same lag. if I don't use the custom font there are no lags. Examples below.

this is the css :

@font-face {
        font-family: 'hebrew';
        src: url(${hebrewFont});
        font-weight: 300;
        font-style: normal;
    }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  hebrew;
    font-weight:100;
    scroll-behavior:smooth;
  }

this is the lag (You can see it kind of lags/jumps. it looks like it first loads the section with a regular font and then it loads my custom font):

enter image description here

if I dont use the custom font (it happens with every custom font) there are no lags. see example:

  * {
   
    font-family:  Trebuchet MS,sans-serif;
    
  }

enter image description here

thank you for help (: I didn't found this problem at all in the web.

framer-motion reactjs fonts css javascript
1 Answers

I had the same issue. Following this guide helped me.

The trick is to preload the fonts in the site's header:

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

This solution eliminated the lag for me, even when using swap as suggested in the comments.

Note that it only worked for me when I set type="font/woff2" even when my fonts were .tffs.

user_66371330
Related