-
-
Notifications
You must be signed in to change notification settings - Fork 399
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
on Safari "i" doesn't render with font weight 600 #701
Comments
Please provide a link to the test pages. What Operating System (with version)? Note: there are more problems with Safari browsers than any others. |
browser: Safari Version 16.3 (18614.4.6.1.5) |
I tested that page on Windows 10. Tested on macOS 14.4.1 I do not know where that Note: On Firefox and chromium it looks better at 500. |
thanks for checking. the files were downloaded from this page https://rsms.me/inter/ |
When I download Note: if your Safari needs |
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 |
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 |
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:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
with font weight 600:
with font weight 500:
Environment
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: