Archived topic
Ensure text remains visible during webfont load
1 reply · Started by Howard on June 15, 2020
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
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';
} );