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

[tiuscia]

Describe the bug on safari the "i" doesn't render with font weight:600, any other font weight works

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

I downloaded the font from: https://rsms.me/inter/

To Reproduce Steps to reproduce the behavior:

1. use font face using the file from your website
2. apply the font inter display with font weight 600

Expected behavior A clear and concise description of what you expected to happen.

Screenshots with font weight 600:

with font weight 500:

Environment

• OS: [e.g. macOS 10.14]
• App that renders the font [if applicable; e.g. Chrome, Adobe Illustrator]
• Version of font [e.g. "Inter Regular 3.0;8cf05e4a" — you can use fontdrop.info to find out the version]

Additional context Add any other context about the problem here.

[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