[Resolved] System Stack – How to Make it Serif?

[Robin]

Hey there – I have my typography set to System Stack, however it shows up as ‘Sans Serif’.

Is there a way to make it ‘Serif’. Thanks.

[Tom]

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 🙂

[Robin]

Thanks, Tom. That did it.

[Tom]

You’re welcome 🙂

[Robin]

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

[David]

Hi there,

how are you adding the Inter font to the site ?

[Robin]

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

[Tom]

What if you set the category to sans-serif?

[Robin]

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.

[Tom]

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.

[Robin]

Thanks, Tom.

[Tom]

No problem!

[Author]

Posts