[Support request] font-display: swap and alternate font specification

[kickpoint]

Hi,

I’ve set up local font hosting on my client’s website, and we are having the following issues:

1) their site loads in a serif font before the designated font. This means the FOUT before the page fully loads is pretty jarring.
2) setting font-display: swap in the @font-face declaration doesn’t seem to have an effect on this
3) I’d like to specify the backup font family as a sans-serif, rather than what looks like Times New Roman, so that at least if the system font isn’t loading immediately the FOUT is a less drastic variation from the designated font (Source Sans or Noto Sans). I can’t see a place to set this up in the typography customizer panel.

I’m having the FOUT issue (with a serif as the backup font) if the font is hosted locally or if it’s served with Google’s Fonts API. Let me know if you have any suggestions for working with this!

Thanks so much,

Leanne

[Elvin]

Hi there,

2) setting font-display: swap in the @font-face declaration doesn’t seem to have an effect on this

Do you still have this setup? I don’t see it on your site. You can’t manually add font-display swap on Noto sans if its’ coming from Google fonts though. You’ll need to use a PHP filter for this.

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

Can you try using an optimization plugin? all.min.css should already set sans-serif and take whatever is available on your system stack but it doesn’t seem to be loading faster than it should.

The 2 CSS here should’ve covered what you needed but if all.min.css is loading a bit too late, you’ll see FOUT.
https://share.getcloudapp.com/7KuPW4jN

[Kev]

I’m having this issue on my site. I load Fira Sans, but I use a filter in my functions file to that it’s loaded into the Customiser:

 /* Load custom fonts to the customiser */
 add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Fira Sans Condensed';
    return $fonts;
} );

I’m getting FOUT where Times is loading for new visitors. I’d really like the option to change this to something sans-serif, but there’s no option in the customiser.

I could obviously do this in CSS, but it would mean overriding the customiser, and I’d rather not do that so I can still manage typography in the customiser.

Thanks.

[David]

Hi there,

in GP 3.1 new Typography ( currently in Alpha ) settings you will be able to select any Google Font in the Customizer, and its default font-family will match that what is set in the Google Fonts library. Which for that font is:

font-family: 'Fira Sans', sans-serif;

This however doesn’t preclude the browser from doing its own thing.
Personally i avoid using Display Swap unless absolutely necessary, the alternatives is to try serving the font locally, the potential performance improvements of removing the Google Font DNS and Network requests can eliminate the need for swapping.

[Kev]

But I’m not using Google fonts. So I’d need to do it in good old CSS then? Not a problem, I’d just prefer to use GP if possible.

[David]

Sorry – im a little confused, you mentioned Fira Sans which is a Google Font:

https://fonts.google.com/specimen/Fira+Sans+Condensed?query=fira+sans

Unless you added that locally to your site ?

[Kev]

It’s not just a Google Font. I try not to use any Google services, so I self-host the font on my website and serve it using the php filter so that it’s loaded in the WP Customiser.

[David]

Ah ok – so locally hosted fonts would require today either:

a) Custom CSS

or

b) overwriting the GP System Stack font to create your own fallback list:

https://generatepress.com/forums/topic/specifying-a-fallback-font-for-locally-added-fonts/#post-870701

But this would be limited to just the single font as you would select System Stack in the Customizer.

With the next release you will be able to set those fonts in the customizer.

[Kev]

Ok cool, thanks David – I’ll stick with what I know and go with custom CSS. Thanks.

[David]

Glad to hear that

[Author]

Posts