[Resolved] Ensure text remains visible during webfont load

Home Forums Support Ensure text remains visible during webfont load

  • This topic has 1 reply, 2 voices, and was last updated 3 months ago by Tom.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1328967
    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

    #1329160
    Tom
    Lead Developer
    Lead Developer

    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';
    } );
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.