Specifying a fallback font for locally added fonts?

No problem!

Hi,

we are building a site using a locally embedded font "National Regular". How can I se "System Default, Ubuntu, Helvetica" as fallback-fonts?

Thank you in advance and kind regards,
Sascha

Hi there,

with the current typography system you would need to use the PHP Snippet Tom provides here:

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

This will allow you to add your Local font, as the System Stack with the fallback fonts you require.
Then in the Customizer you would select the System font instead of your local font.

Hi David,

thanks, but I have trouble understanding how to apply this correctly.

We use a local font called "Natural Regular" and for some headlines "Natural Extrabold" on our site, and we want "System Stack" to be the fallback. This is the complete stack:

National Regular, Calibri, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif

So when checking the filter/snippet that Tom has provided, does this mean I need to add the following code to the functions.php?

add_filter( 'generate_typography_system_stack', function() {
    return 'National Regular, Calibri, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif';
} );

Thank you in advance and kind regards,
Sascha

Thats correct, but you should include the additional quotes around your local font:

add_filter( 'generate_typography_system_stack', function() {
    return '"National Regular", Calibri, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif';
} );

But with the current system you can only set the System stack for the one font - so the other snippet will apply to just National Regular.

We're very close to releasing the alpha version of GP3.1 and GPP2.1 that will allow you to create your own fallbacks for any fonts.

Hello,

Is Tom's method from 2019 the one applicable now for locally loaded fonts? I would like to give "Open Sans" a fall back of Verdana then the last resort sans-serif.

Thanks!

Hi Stephane,

You should now be able to stack fonts in Appearance > Customize > Typography.

Example: https://share.getcloudapp.com/04uydq51

In this example, test-font is the primary font, and impact is the fallback.