Font style doesn't work with new font

Question

We seem to have gotten a new font in the last couple of days. This new font family for me is for the most part the below. As most other font-family's use inherit.

body {
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

With Open Sans the font style doesn't work. Where writing, the following all come out with the normal font style.

normal, _italic_, __bold__, ___bold italic___

As demoed here:

normal, italic, bold, bold italic

Screenshot for posterity:

Answer 1

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.

Answer 2

Firefox override CSS workaround

I found a way to override the CSS in Firefox thanks to a post on SuperUser. I copied & updated the instructions to be current (as of FF version 56.x), I tested this to work on Windows 10 but probably would work fine on any OS.

1. Open Firefox and press Alt to show the top menu, then click on Help → Troubleshooting Information
2. Click the "Open Folder" button beside the Profile Folder entry
3. Create a folder named chrome in the directory that opens. Make sure "chrome" is all lower case.
4. In the chrome folder create a CSS file with the name userContent.css
5. Copy the following code to userContent.css, replacing "example.com" with the website you want to modify and your own custom CSS, save the file, and restart Firefox: (may be a good idea to clear cache too)

@-moz-document domain(codereview.stackexchange.com) {
    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
    }
}

@-moz-document domain(codereview.meta.stackexchange.com) {
    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
    }
}

What this does is override the CSS rule that tells Firefox to use "Open Sans" font as 1st priority. Note that it didn't work without the !important flag so that needs to be there.