[Resolved] Ensure text remains visible during webfont load

[Howard]

Tom previously wrote:

Hi there,
The font-display value actually needs to be set inside the @font-face block of CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#Examples
When using Google Fonts,
Google actually provides @font-face blocks of code, so they would have to implement it on their side of things.
Let me know if you need more info 🙂

Does this mean I should add to SIMPLE CSS the following: ( I use Ariel font with GP premium)

Examples

@font-face {
font-family: ExampleFont;
src: url(/path/to/fonts/examplefont.woff) format(‘woff’),
url(/path/to/fonts/examplefont.eot) format(‘eot’);
font-weight: 400;
font-style: normal;
font-display: fallback;
}

thanks
Howard

[Tom]

Hi there,

Are you adding your own custom font in Simple CSS with @font-face? If so, yes – that’s exactly what you would do.

If you’re using a Google font set with GP in the Customizer, you can set it like this:

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

[Author]

Posts