Google font display=swap strange behaviour

Question

I tried to use google font api by injecting this piece of code into my html code

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Source+Serif+Pro|Suwannaphum&display=swap" rel="stylesheet">

I found when loading my website the text using the font would "glitch". It would be displayed as small for a brief second then become normal.

After a lot of experimenting I removed &display=swap section from the code and the issue didn't occur anymore and I was able to use the font.

Why does &display=swap cause a glitch? I copied the code directly from google api font website.

Answer 1

The &display=swap sets font-display: swap, which allows for the fallback font (the smaller one in your case) to be used until the font has been loaded and can be swapped in.

By not using &display=swap, you will not have the issue with changing fonts, however it will take an increased amount of time before any text using the font is visible on your website.