Getting a Flash of unstyled text when navigating am I importing fonts wrong?

[dweng0]

Hi all, title says it all really. Was wondering if this was something other people have a custom thieme specified in the _quarto html file

html:    
    theme:
      light: [cosmo, _theme/theme.scss]

and in the theme.css file, we specify a custom font:

@font-face {
    font-family: 'Berkeley Mono';
    src: url('assets/fonts/BerkeleyMono-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/BerkeleyMono-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


/*-- scss:rules --*/
body {
    font-family: 'Berkerly Mono';
}

and the fonts are correctly placed in the location specified assets/fonts/BerkeleyMono-BoldItalic.woff2'

when we reload the page, we get a FOUST:

Screencast.from.2023-09-07.13-00-29.webm

For using custom fonts is this the best approach or should i use the config as specified here

If i do use that, i'm not sure how to implement custom fonts. Am i doing it wrong?

[dragonstyle]

Which browser are you using? From my brief reading, it seems like behavior can vary, and I'm not certain particularly with Mozilla how to resolve this:

https://developers.google.com/fonts/docs/technical_considerations#browser-specific_behavior

I wonder whether for that case, at least selecting a font that is similar to the google font might reduce the obviousness of the fout, or perhaps there is something from an HTTP caching perspective that could be configured to ensure that the fonts are loading quickly from the user cache after the first download?

[dweng0]

Is this something other people have got? I'm just wondering if i use preloading tags if that might help with it. Will find out and get back to you

[dweng0]

Just an update on this. In the end i added preload scripts to my template

  <link rel="preload" href="../_theme/fonts/BerkeleyMono-Regular.woff2" as="font" type="font/woff2" crossorigin>

and changed the font loading strategy from swap (use fallback until font loaded) to block which waits till the font has loaded. I expected a flash of instant text, but testing showed none.

@font-face {
    font-family: 'Berkeley Mono';
    src: url('/fonts/BerkeleyMono-Italic.woff2') format('woff2'),
        url('/fonts/BerkeleyMono-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: block;
}