Search code examples
csssassfont-facewebfonts

variable font flickers on page load

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!

Solution

  • 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.