System Stack - How to Make it Serif?

Hi there,

You can filter the system stack font to be whatever you like:

add_filter( 'generate_typography_system_stack', function() {
    return 'serif';
} );

Let us know if you need more info :)

Thanks, Tom. That did it.

You're welcome :)

I decided against using Serif on my site. I have removed Tom's script and...

...typeset in Inter but the fallback font is still serif.

I've been looking for at least an hour. Any ideas of how I can remove the fallback serif font?

TIA

Hi there,

how are you adding the Inter font to the site ?

Hi David,

I have selected the Inter font from Customizer > Typography > Body and numerous Headings.

I also have this snippet installed:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'inter' ] = array( 
		'name' => 'Inter',
		'variants' => array( '100', '200', '300', '400', '500', '600', '700', '800', '900' ),
		'category' => 'serif'
	);

	return $fonts;
}

Is that of help? TIA

What if you set the category to sans-serif?

Thanks, Tom. I had to turn off the snippet and then turn it back on for the changes to take effect.

Is there much difference in page loading if I use Inter font compared to Inherit?

Many thanks to both of you for your help.

System stack will be more performant, as nothing has to be downloaded by the browser.

Google fonts will always cause a bit of a performance hit, as the browser needs to download the fonts from Google.

Thanks, Tom.

No problem!