Missing characters for different font weights - MacOS Sierra & Chrome
robpieke opened this issue · 20 comments
I have an issue where websites using the Oswald font are only rendering a fraction of the characters (so, for example "HI THERE" might appear as "HHR").
After much Googling I found no solution, but there is another person who reports exactly the same issue (same OS, same missing characters):
https://support.google.com/chrome/thread/15133278?hl=en
There's a screenshot in the linked post above, which makes the issue very obvious.
Any ideas? I'm at a loss as to how to even debug this.
Thanks for reporting.
Do you have the same issue when viewing https://fonts.google.com/specimen/Public+Sans?selection.family=Public+Sans?
Yes, that one is also missing a lot of characters for me.
But not this one, for example: https://fonts.google.com/specimen/Roboto
Thanks.
Both Oswald and Public Sans are variable font families. Roboto is a static font family. I see you're using OS X Seirra. Since this OS was released in 2016, variable fonts are probably not supported.
We're currently debating whether we should disable variable fonts for older version of Mac OS X. I think this issue confirms that we should.
I assume "Muli" is also variable? This is where my practical pain actually started, because it's one of the fonts-of-choice for Ocado (online groceries) and I can no longer use Chrome on this particular Macbook for my weekly shopping (or I can ... so long as I don't need to see any of the prices).
I know I'm asking a question well outside the scope of the Oswald font now, but do you know of any Chrome setting/extension/something which would let me somehow block/reassign these problematic fonts?
Thanks for your astonishingly quick replies. Beer's on me if you find yourself near Soho, London.
Yes, Muli is also a variable font.
I apologise for the inconvenience this is causing you. Have you tried using Safari or Firefox? that may alleviate the issue for the time being. I'll see if we can get this fixed asap.
Oh, I'm definitely not blocked by this. Different browsers on this Macbook work, a different Macbook with Mojave works, my phone works. I'm very very mildly inconvenienced by this, but it's been driving my inner "I must solve this puzzle!" self crazy :)
Marc, you are correct that OSX 10.12 does not support variable fonts. However, Chrome does support them regardless of the OSX version it's running on. So we would send variable fonts to Chrome 79 on OSX 10.12.
I tested that combo on browserstack and am unable to reproduce the issue on any version of OSX.
This shouldn't be a local font issue since we don't issue local() for variable fonts CSS.
Ah nuts, back to square one. @garretrieger is there anything you can recommend as a way for me to further debug/test and provide meaningful information back? It's interesting that, whatever the cause, it's not just me (see the original link) and the effect is identical. Is there any way a local build of some font-related component/library might be getting loaded in front of whatever Chrome has built-in?
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
I've just had a look at the Oswald page using Browserstack with the same config.
Here's the useragent I have:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36
This is pretty much identical to yours, apart from the Chrome minor version.
When I check the css, I'm receiving exactly the same fonts as you. I wasn't able to replicate the issue I'm afraid.
Thanks for all the effort! I'll keep Googling and trying random things. Must solve this puzzle! :)
Just a thought, see if you get the same result in the latest Chrome beta.
Version 80.0.3987.16 (Official Build) beta (64-bit)
No change in behaviour, unfortunately. I'm reluctant to do a hard-nuke of my Chrome cache (I've already tried clearing "cached images and files"), but it might be the next thing.
Further weirdness (or perhaps this is expected).
The preview for Public Sans is fine here:
https://fonts.google.com/?query=Public+Sans
(inspecting the element, the font-face is "Public Sans script=latin rev=1")
But, as previously noted, not here:
https://fonts.google.com/specimen/Public+Sans
(inspecting the element, the font-face is "Public Sans script=all rev=2")
I also tried creating a new user account on the Macbook to rule out something weird with my user ... no difference.
Last observation for the night: I tried a local snippet of HTML to try and debug further.
For Oswald with weight 200, this works fine:
<link href="https://fonts.googleapis.com/css?family=Oswald:100,200" rel="stylesheet">
seems to resolve to:
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3_WkUHHAIjg75cFRf3bXL8LICs13FvsUZiYySUhiCXAA.woff) format('woff');
And this doesn't (i.e., I get missing characters):
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300" rel="stylesheet">
seems to resolve to:
src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
When you request a single font, we'll send you a single static font. If you request a range of weights, we'll send you a VF if the family has one. Both Oswald and Public Sans have VFs.
From your user agent it looks like you're on OSX 10.12.0, would it be possible to try upgrading to OSX 10.12.6?
Yeah, I noticed that as well. It's a corporate machine, so I'll chat with the systems team. My guess is if they upgrade it they'll go straight to Mojave (or similar). I'll keep you posted.
I'm a Chrome user and I have the same problem! Has happened on several sites, but today was what drove me to go try figure out if I can fix this.
What was clearly English text was being displayed in Sinhala, so I assumed that it was a font substitution error. I copied and pasted the text onto Word to see what the font is so I could just delete it. Turns out it's Oswald, so I Googled and now ended up here.
Thing is, on the Oswald page on Google everything shows up fine.
But on some others (DeWalt UK, where I had the issue right now) it's broken. URGH. I just wanted to buy a chainsaw in peace and now I'm going down this rabbit hole instead.
I'm running Chrome Version 112.0.5615.138 (Official Build) (64-bit) right now (auto updating).
