on Safari "i" doesn't render with font weight 600 about inter

[kenmcd]

Please provide a link to the test pages.

What Operating System (with version)?
What browsers (with version)?
Test multiple browsers.

Note: there are more problems with Safari browsers than any others.
Try multiple browsers.
It could just be another bug in Safari.
Especially if you have an older version of macOS.

[tiuscia]

@kenmcd

browser: Safari Version 16.3 (18614.4.6.1.5)
OS: Ventura 13.2
Live page where you can test: alokai . com/blog/modernize-sap-cc-storefront-with-headless-frontend
search "Many companies using SAP Commerce Cloud" in the content and change the current font-weight 500 to 600 to the H3

[kenmcd]

I tested that page on Windows 10.
Only thing I changed was the 500 to 600.
Firefox - looks fine
Vivaldi (chromium) - looks fine
They both use the InterDisplay-SemiBold.woff2 file.
I downloaded that file from your site and took a look inside.
All looks good.

Tested on macOS 14.4.1
Safari - not OK - the "i" is missing.
Safari is using the InterDisplay-SemiBold.woff file.
I downloaded that file from your site to take a look inside.
But, there is something wrong with that file.
Cannot be opened in either FontLab or FontCreator.
So I extracted it to a .ttf file.
Cannot be opened.
The error messages state it is not a valid font file.

I do not know where that .woff file came from, but that appears to be the issue.
The Inter download only includes .woff2 files, and no .woff files.
So review the process used to create that file, and test before using.

Note: On Firefox and chromium it looks better at 500.
At 600 it has more visual weight than the heading above it.
It does look different in Safari.
You need to test with more browsers.

[tiuscia]

thanks for checking.

the files were downloaded from this page https://rsms.me/inter/
is there another official page where I could download the font?

[kenmcd]

the files were downloaded from this page https://rsms.me/inter/
is there another official page where I could download the font?

When I download Inter-4.0.zip from that page there are only woff2 files available in it, no woff files.
So I am wondering where the woff files are coming from.

Note: if your Safari needs woff you can just compress them yourself.

[rsms]

You are requesting italic but not loading any italic fonts which causes you web browser to try an manufacture a slanted font from the roman/upright fonts (and I guess the version of Safari you are using fails to synthesize the "i")

Look at the "e" to see if you are using the true italic font or a synthetic one:

https://rsms.me/inter/lab/?family=display&italic=1&sample=companies&size=132&varfont=0&weight=600

[rsms]

the files were downloaded from this page https://rsms.me/inter/
is there another official page where I could download the font?

When I download Inter-4.0.zip from that page there are only woff2 files available in it, no woff files. So I am wondering where the woff files are coming from.

Note: if your Safari needs woff you can just compress them yourself.

Yeah, you can just remove the woff format, making your CSS look like this:

@font-face {
  font-family: "Inter Display";
  font-weight: 600;
  font-display: swap;
  src: url("/font/inter-display/InterDisplay-SemiBold.woff2") format("woff2"),
       url("/font/inter-display/InterDisplay-SemiBold.ttf") format("truetype");
}

Really ancient browsers which does not support woff2 will support ttf. If you really really care about download file size for such visitors, you can do what @kenmcd suggest and produce your own woff files from the ttf files.

For correct font-face declarations, see https://rsms.me/inter/inter.css