Inter font rendering issues

[matjazpotocnik]

See how Slovenian characters looks odd:

[matjazpotocnik]

So, I downloaded original inter fonts from https://github.com/rsms/inter and noticed, that their font files are much larger than ours. This led me to believe, that some glyphs are missing. I made a change in admin-custom.css, and replaced our fonts with the downloaded fonts, for example:

src: url("./fonts/inter-v18-latin-regular.woff2") format("woff2"); => src: url("./fonts/Inter-Regular.woff2") format("woff2");

Now, it lokks fine:

[ryancramerdesign]

@konkat-studio @jploch @ocorreiododiogo Is it okay for us to swap in the versions that @matjazpotocnik suggests?

[jploch]

@ryancramerdesign I think our version is only loading a subset for latin languages. Seems like it's missing some glyphs.

We would need to replace 4 font files (Regular, Italic, Bold, Bold Italic). This would increase the file size quite a bit. Currently those fonts are about 24KB each. The fulll versions of those fonts would be about 120KB each. Seems like older versions are even bigger. You can get the latest full versions here: https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip

There is also a variable font version, but this one is 880KB, so I won't consider it.

@matjazpotocnik Can you confirm that the files from verion 4.1. (link above) are fixing the issue?

[matjazpotocnik]

I replaced just regular and bold ones, didn't try italic, but I guess it does fix things. We already load A LOT of css/js assets, so a few hundred KB won't play a role. We could shrink woff files, but then you have to do it every time the font files are updated, IMHO, not worth it.

[jploch]

@matjazpotocnik thanks for the quick reply! Since they are cached anyway I think it's ok.

@ryancramerdesign can you replace the files with the corresponding files from here: https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip Thanks!

[mminglis]

Browsers are very smart about figuring out what subsets and glyphs to load with today's large font sets, this is why google fonts doesn't let you control subsets anymore as it really doesn't matter.

An alternative to the Rasmus's configurator (which is really meant to showcase features and allow fine-grained control for really specific needs) would be using google fonts version of Inter as a variable font. This will already be cached in all users browsers given the popularity of the font, will receive updates in the background, and will be simpler to use and maintain use of.

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

[ryancramerdesign]

@matjazpotocnik @jploch I've pushed a fix by using the version you suggested. Thanks.

@mminglis Good idea, but PW is often used offline so it can't have any external dependencies.