variable font flickers on page load

user_5790733 0
Viewed 805

I have the following problem: I'm using the variable font from the family inter (https://rsms.me/inter/) and implemented it the following way:

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}

html { font-family: 'Inter var', sans-serif; }

When styling a font, I only want to change the font-weight, therefore I declare it like this:

p { font-variation-settings: 'wght' 200; }

The browser renders the font in the correct family and weight, but unfortunately on page load, the font always "flickers" shortly. It seems to me, that the browser first renders the font in the normal font-weight and then re-renders it with my wanted weight. This issue is happening on all fonts I use with the variable font-variation-settings.

The behaviour happens on every page load, also on reloads. You can have a look at the issue during page-reload here: problem appearing while reloading page

Thanks for a hint!

webfonts font-face sass css
2 Answers

As we have found there are many causes for font flickering.

  1. The solution for the problem that promted this post was found by the post creator:

    "I have fixed it somehow: I have asked the creator of the font and this was his answer: "Probably because you are using font-display:swap (it intentionally causes "flicker" for requests to fonts that are not cached in the client, which should be rare.) See developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…" If I change the font-display to block, it does not flicker anymore but there is a longer period of time, where the font doesnt get rendered. I have decided to change the project and work with an standard not variable font. – Mista K."

  2. Loading on a server:

    While I am certainly not an expert on this. Loading the file on a server fixes the problem. This is likely due to the style sheet being cached when loaded on a server.

  3. Changing font:

    This is not so much a fix, but errors may be caused by the font itself infortunately.

  4. Another quick fix:

    Adding a loading screen may be required for a project and thus the font can be loaded within this.

Sorry this is not the most definitive post, this is just what we have found to be solutions over discussing this problem. Feel free to comment on this to add to this or even to tell me I'm wrong.

user_144739020

This seems to be a problem with the font it's self the best solution I can give is to simply use another font. I would recommend using google fonts

HTML:

    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
    </head>

CSS:

p {
    font-family: 'Open Sans';
}

----------Original Post----------

Why not just simply use p {font-weight: 200;} instead, this might solve the problem and would probaly be easier to read (at least from an external persective)

Also try adding your font-family to body instead of html if this doesn't work

user_144739020
Related