Update
This problem has been submitted to Meta.StackExchange. At the time of this edit, it has not yet been resolved.
Cause
I done some testing on my machine, and found that I have a broken Open Sans font located in C:\Windows\Fonts
. However even when I deleted this broken font it was re-acquired at some point. I'm unsure if this was due to Windows, or due to a different installer.
If you're affected by this bug, you can test this yourself by removing all local("Open Sans")
from /Sites/codereviewmeta/all.css
. On Firefox, in the Style Editor, these are positioned between line 23000 and line 23100. (Scroll to the bottom)
This bug currently doesn't affect Chrome, due to a bug in Chrome. This is as, for some reason, it currently ignores the local font, and just downloads the server font.
Otherwise this bug should affect all font spec compliant browsers.
Resolution
I looked into this a little more into the fonts that I have and found Windows Explorer was hiding the font family a little:
PS C:\Windows\Fonts> ls
Directory: C:\Windows\Fonts
Mode LastWriteTime Length Name
---- ------------- ------ ----
[...]
-a---- 3/18/2017 8:58 PM 69316 ntailub.ttf
-a---- 10/17/2016 5:09 PM 222412 OpenSans-Light.ttf
-a---- 9/11/2012 1:33 PM 217360 OpenSans-Regular.ttf
-a---- 10/17/2016 5:09 PM 221328 OpenSans-Semibold.ttf
-a---- 3/18/2017 8:58 PM 472216 pala.ttf
[...]
Looking into the Mozilla bug report, linked in the Chrome bug report. Which says:
No, Firefox is correct here AFAICS. The src:local() descriptor takes
an individual font *face* name, which may be either the "full name" or
the "postscript name", according to the CSS Fonts spec.[1]
In this case, the font's fullname and psname are both "SteveHand", and
therefore that is the correct name to use in src:local(). The name
"Steve" is the *family* name (which could potentially identify a whole
family of "Steve" faces with different weights, widths, italicness,
etc), and this is *not* valid for use in the src:local() descriptor.
From a quick look at the Chromium issue mentioned, it sounds like
Chromium may be accepting the font *family* name in src:local(). If
so, that's a bug (and a violation of the spec).
[1] https://www.w3.org/TR/css-fonts-3/#src-desc
And so replacing local("Open Sans")
to local("Open Sans Regular")
- the font name, rather than the family name. It works in Firefox. Leading to the following CSS, for one of the many font-faces:
@font-face {
font-family:"Open Sans";
font-weight:400;
font-style:normal;
src:local("Open Sans Regular"),url("../../Fonts/open-sans/opensans-regular-webfont.woff?v=6602c110b789") format('woff')
}
I would do further testing, but Chrome has mini-heart attacks that last a prolonged period of time, when changing the font-family. I'm not even sure if it updates the fonts. However it comes down to having the font installed locally.
local("Open Sans")
solves the problem for me, too. \$\endgroup\$