Inter var file containing only the needed font weight range?

[Nemmcy]

I have been using Inter from Heroku for quite some time, but decided recently to switch to variable fonts to reduce the number of http requests.

However, the available Inter-roman.var.woff2 file is way larger in size than my standard ones:

Standard from Heroku:

• inter-v8-latin-400.woff2 (17kb)
• inter-v8-latin-500.woff2 (17kb)
• inter-v8-latin-600.woff2 (17kb)
• inter-v8-latin-700.woff2 (17kb)
  => total loading time ~150ms (preloaded)

Variable from rsms/inter:

• Inter-roman.var.woff2 (222kb)
  => total loading time ~50ms (preloaded)

This led to an average 5 points decrease on Google PageSpeed on mobile which is huge. The website is already over-optimized and I made sure that the connection was stable. The moment I switch back to std/var fonts, the score increased/decreased on average by 5.

Worse, there is a new warning on Google PageSpeed:

• Ensure text remains visible during webfont load. Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
  => ./fonts/Inter-roman.var.woff2 (min 150ms, FCP and LCP increase)

Way bigger size, slower, worst speed score.

Two questions:

1. How to extract the needed range of font weights from Inter-roman.var.woff2 to decrease the size? Here, 400-700?
2. How to compress even more Inter-roman.var.woff2?
3. Best tools (open-source/free) to do 1 and 2?
4. Do you know a website like Heroku where this is done for you?

If you could help me, I would be infinitely grateful!

[ThomasRettig]

1. You can use a variable font subsetting tool to extract only the necessary range. Personally I find Slice GUI quite good. To "compress" the font further, you might want to look into character subsetting. I use FontTools to do this. There’s also a helpful article that shows you how to use it.
2. Unfortunately, I am not aware of a website similiar to the one you mentioned.

You also mention:

Ensure text remains visible during webfont load. Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
=> ./fonts/Inter-roman.var.woff2 (min 150ms, FCP and LCP increase)

This is a simple fix—use the CSS font-display: swap declaration in your @font-face, like so:

@font-face {
  font-family: 'Inter';
  src: url('your-font-url.woff2') format('woff2');
  font-display: swap;
}

Hope that helps!