Archived topic
Adobe TypeKit | Fallback Font
5 replies · Started by André on August 3, 2018
Hey Tom - I have the following font filter working:
add_filter( 'generate_typography_default_fonts', 'tu_add_typekit_fonts' );
function tu_add_typekit_fonts( $fonts ) {
$fonts[] = 'freight-text-pro';
return $fonts;
}
... but how to I add a "fallback font" if I want the declaration like this:
font-family: "freight-text-pro",Georgia,serif;
Thanks!
Hi there,
If i am reading this correctly, you would apply the font stack to the particular element in CSS e.g:
body {
font-family: "freight-text-pro", Georgia, serif;
}
David, the filter allows me to select the font (Freight Text Pro) from the customizer:

... but I don't get to control what the fallback font is.
So is there a way to declare a fallback font within the filter?
Unfortunately there isn't (there should be, noted).
Instead, we can filter the "System Stack". So you would add this function, then choose the "System Stack" font in the list:
add_filter( 'generate_typography_system_stack', function() {
return '"freight-text-pro", Georgia, serif';
} );
Let me know if that works or not :)
Thx Tom. Is there is downside of using the "System Stack" like this?
Nope, no downside at all (unless you want to actually use the System Stack).
