- This topic has 7 replies, 4 voices, and was last updated 4 years, 9 months ago by
.
-
Posts
-
Since Inter is not available in the Typography customizer I added the following snippet to enable it:
add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' ); function tu_add_google_fonts( $fonts ) { $fonts[ 'Inter' ] = array( 'name' => 'Inter', 'category' => 'serif' ); return $fonts; }While font itself is added changing font-weight to 300 does not have any affect. It does not matter if I change in customizer or F12.
If I add the same font with the Fonts Plugin and only configure system stack in the Typography customizer I can choose any weight, as expected with a variable font.
I have setup two plain GeneratePress installs with only Typography module enabled for reproducing the issue. Links are in Private information.
Customer Support
Hi there,
Can you try adding the variant as seen here?
https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-listChanged the snippet to the following:
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', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ), 'category' => 'sans-serif' ); return $fonts; }Then I got options in the Variants dropdown. I can select any font weight but it seems that only the weights that match a variation is working. Is that the expected behavior?
Customer Support
Hi there,
The Typography module is due for an update – it doesn’t distinguish from Variable and regular fonts. So the Varients have to be loaded if they are intended for use. So what you’re seeing is ‘expected’ behaviour – albeit not what you needed.
Will be addressing that when we update the Typography module which is high on our list of to do’s
Thanks. Then I know how to explain it to my team. Looking forward to the new Typography module.
You’re welcome
Had exactly the same issue, but it’s easy to solve, so for anyone else finding this thread. You can add weights for a variable font like this (I added this code to a WP_HOOK – HEADER element):
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap” rel=”stylesheet”>The key is adding :wght@300..900 (400..800 all weights from 400 to 800 || 400;800 just 400 and 800)
there’s a great article here:
https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/As there’s more you can do. But adding a font through customiser, and then this code to the /head – will at least make the font behave like a ‘normal font’.
Thanks for sharing Mike!
- You must be logged in to reply to this topic.
