[Resolved] Typeface Inter

[Enrico]

Hi,
It is possibile to use the Typeface Inter in GPP?

It is now used in WP’s Twenty Twenty Theme and they say it has many benefit. Do you think Inter should be better then System Stack?

The typeface Inter, designed by Rasmus Andersson. The tall x-height of Inter makes it highly legible in the smallest of font sizes, and provides a strong personality when used in big headings.

Inter comes in a Variable Font version, a first for default themes, which contains all weights and styles of Inter in just two font files. In modern browsers, this will help keep the number of requests and the page size down. Older browsers will fall back to loading each weight as a separate file. Running text will be set in a stack of serif system fonts to keep load times short and data caps distant.

[Tom]

Hi there,

Looks really cool! I wonder if System Stack is still more performant, though? I’ll definitely play with it.

You can definitely integrate it into GPP using our filters – do you need some help doing that?

Let me know 🙂

[Enrico]

Hi Tom,
I am happy that you like the suggestion of this free font project. I have seen now that with GPP’s Filters I can use any font I load on my server: https://docs.generatepress.com/article/adding-local-fonts/

I think Inter should be more legible then System Stack but a bit slower. If you load all the font files in two files you have less requests but it shouldn’t be faster with http2.

The variable font renders poorly in Chrome
There are some known issues with variable fonts in Chrome, in particular on Microsoft Windows. You may see an effect similar to “ink bleed” where shapes overlap, for instance where the vertical and horizontal stems meet in “+” or “t”. On Windows you may in addition see incorrectly placed glyphs that looks like poor kerning (spacing between characters) and even some glyphs being lower or taller than other glyphs. It is recommended to avoid using variable fonts on Chrome. See the Chromium bug tracker for a list of variable-font related issues.

Now I am testing the new GP and GPP, I will wait for your judgment and decision on the Inter font project.

Thanks a lot
Enrico

[Robin]

Tom, any update on adding Inter – It’s an awesome font.

Cheers, Robin

[Tom]

It looks like it’s being added to Google fonts: https://github.com/google/fonts/pull/1908#issuecomment-580509162

Once it’s added we’ll update our list 🙂

[Robin]

Thanks, Tom. Have a good weekend.

[Tom]

Thanks, you too!

[Paul]

Inter has now been added to Google Fonts:

https://fonts.google.com/specimen/Inter

Can this be added to GP?

I did download the font but uploading is still blocked – I have added the function used to bypass security settings.

Thanks,
Paul.

[David]

Hi there,

before Tom adds it to the list – you can use this filter:

https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list

[Paul]

Thanks David, that works. Just in case anybody wants to use it:

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;
}

[Robin]

Thanks for that, however, I get the following error message when I add it in ‘Snippets’.

The snippet has been deactivated due to an error on line 3:

Cannot redeclare function tu_add_google_fonts.

[Enrico]

Hi David,
I tested the Google’s Inter font performance and it is much slower then local font. I lost 3 to points in the Google page speed test. I got 96 with inter font and 99 using the local font.

Is it possible and easy to add the Inter font locally? Do you plan to add it locally?

In my test I used this code:

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

	return $fonts;
}

[David]

Thanks Paul

Robin – that means you have already used that function to add fonts to the list – you can either combine the functions or in Pauls function you will see two instances of: tu_add_google_fonts change them to something else eg. tu_add_google_fonts_two

Enrico – now its on google you can use this topic to add it locally:
https://docs.generatepress.com/article/adding-local-fonts/

Haven’t tested it yet – but i expect it will behave better then trying to add the RSMS original font.

[Robin]

That’s great. As always, thanks, David. Stay well.

[David]

You’re welcome Robin – You too!

[Author]

Posts