[Resolved] preloading fonts

[t29k75]

Hi,

I’m self-hosting Mulish 400 and 700 weight fonts.
I am trying to preload them, but it looks like it is not working.

I created hook element (wp_head, entire site).
Added the link content: `<link rel=”preload” as=”font” type=”font/woff2″ href=”https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff2&#8243; crossorigin=”anonymous”>
<link rel=”preload” as=”font” type=”font/woff2″ href=”https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff2&#8243; crossorigin=”anonymous”>`

my font face CSS: `/* mulish-regular – latin */
@font-face {
font-family: ‘Mulish’;
font-style: normal;
font-weight: 400;
src: local(‘Mulish Regular’), local(‘Mulish-Regular’),
url(‘https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff2&#8217;) format(‘woff2’),
url(‘https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff&#8217;) format(‘woff’);
}
/* mulish-700 – latin */
@font-face {
font-family: ‘Mulish’;
font-style: normal;
font-weight: 700;
src: local(‘Mulish Bold’), local(‘Mulish-Bold’),
url(‘https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff2&#8217;) format(‘woff2’),
url(‘https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff&#8217;) format(‘woff’);
}`

In LiteSpeed Cache settings am using font-display:swap;

After viewing any of the pages (after clearing cache) FOUT is still visible. Could you please look into it?

thanks,
Tibor

[David]

Hi there,

the display=swap will tell the browser to use its system font to display whilst the actual font is downloaded.
And preload font may commence loading the font quicker, but if there is a slight delay in the font loading and the page loads really fast then the display=swap is going to do its thing.

Personally i would disable the display=swap option.

[t29k75]

I changed ‘display=swap’ to ‘default’ option in LSCache (have to choose one or the other). Loading the pages looks same. Could I use/overwrite it with something else then swap & default and add it to font-face css?
…and is mine hook link content correct, please?

<link rel=”preload” as=”font” type=”font/woff2″ href=”https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-regular.woff2&#8243; crossorigin=”anonymous”>
<link rel=”preload” as=”font” type=”font/woff2″ href=”https://surf-atlantic.com/wp-content/themes/generatepress_child/fonts/mulish-v3-latin-700.woff2&#8243; crossorigin=”anonymous”>

thanks

[David]

I am not seeing the FOUT anymore – have you tried clearing any browser caches ?

[t29k75]

yes I did, or usually I am viewing it in incognito mode…but if it is not there anymore, am happy!

thanks David

[David]

You’re welcome

[Author]

Posts