[Resolved] Best practice adding google fonts with GeneratePress?

[Jacob]

780 ms decrease in loading time when adding Vollkorn to my typography design from google font and occasional flickering upon page load also referred to as fout I believe.

What is best practice for adding Google Fonts to GeneratePress ?

Thank you.

[Elvin]

Hi Jacob,

The best practice on any site generally is to use only 2-3 font families and try to remove unused variants. (less is better)

Example: If you’re using only font weights 400 and 600 regular (no italic), make sure the customizer doesn’t include 100,200,300,500,700,800,900 and italic variants of the font-family so it doesn’t get included when the site loads the Google stylesheet for it. This way, the site only loads what it needs. It’s more efficient. 😀

Consider preloading it as well. Optimization plugins usually have an option to do this for you. 🙂

[Jacob]

Thank you. I just followed your guide and I think I have it working. But it is frustrating.

FOIT – not FOUT as I wrote, sorry. https://web.dev/font-display/?utm_source=lighthouse&utm_medium=lr

But I do not want the swap-feature. That annoys me. Anyways, that that I have the google fonts locally hosted I hope it will suffice.

Thank you.

[Elvin]

But I do not want the swap-feature. That annoys me. Anyways, that that I have the google fonts locally hosted I hope it will suffice.

In that case, then you really must preload the font assets.

This is so the font files are the first ones to load on the page, meaning the browser doesn’t have to hide the text while waiting for the font file to load.

This avoids “ensure text remains visible during web font load” flag because the browser doesn’t have to wait for the font as it is already loaded.

[Jacob]

Thank you so much, Elvin

[Elvin]

No problem. 😀

[Jacob]

The font I have chosen as default in my theme, is not reflected in the gutenberg editor ? Should it not be ? Do I need to add some code to have it used in the editor ?

[Elvin]

The font chosen for the theme only loads on the front end.

Gutenberg uses its own stylesheet meaning you’ll have to enqueue a stylesheet for font importation for it as well.

There are plugins like “Custom Fonts” or OMGF that lets you add fonts on Gutenberg but you can manually add this as well using enqueue_block_editor_assets hook.

Example:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'your-handle', 'URL TO YOUR FILE' );
} );

Where URL TO YOUR FILE is the path to the stylesheet that contains your font importation CSS. 😀

[Author]

Posts