# Font style doesn't work with new font

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:

• Which browser and system are you using? On Safari 10.1.1 on Mac OS Sierra it looks as intended. Same with Chrome 58.0.3029 and Firefox 53.0.3. – Aaron Shekey Jun 18 '17 at 15:37
• No repro, it looks perfectly fine for me. Win 10 latest Firefox x64. – Mast Jun 18 '17 at 17:27
• I've got the same problem, in both Firefox and Edge. Chrome does show bold and italic text as expected, though. Removing local("Open Sans") solves the problem for me, too. – Pieter Witvoet Jul 11 '17 at 15:36
• Was able to reproduce the behaviour on Win8.1 FF54. – Zeta Jul 21 '17 at 13:20
• I have the same problem on a Debian buster/sid x86 with Firefox 52.2.0 (32bit). – nath Jul 29 '17 at 22:52
• @AaronShekey I think I found the problem, and a way to fix it on Firefox, it'd be great if you could look over my answer below. (Note I have no clue on how Chrome works when applying it.) – Peilonrayz Aug 29 '17 at 23:21
• I'm seeing this issue with Linux Mint 18.2 and Firefox 55.0.2 – einpoklum Sep 23 '17 at 8:33
• I reported this issue on Meta.SE – Phrancis Oct 14 '17 at 6:57
• I previously saw this reprod on Chrome, and now it has apparently been fixed by a recent update. Are you seeing any changes on your end? If so, I can mark this as resolved. – Jamal Mar 17 '18 at 1:02
• @Jamal I tested it on my GF's laptop that I think should have had the issue. I also checked the source code, and it looks like the CSS has the below fix too. So I think this has been fixed – Peilonrayz Mar 17 '18 at 9:22
• @Peilonrayz Can you provide an edit to your existing answer and accept it? Or accept a new answer? – Zeta Mar 22 '18 at 7:59

## 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).

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.

• I finally got fed up with the behaviour and deleted my Open Sans font, which is a shame :/. But at least the formatting works now, so thanks for the investigation. – Zeta Sep 2 '17 at 9:24
• So, do I have to edit the style whenever I visit a StackOverflow page? – einpoklum Sep 23 '17 at 8:36
• @einpoklum No, that is what Stack Exchange should do. If you want to fix it pacman -R ttf-open-sans. Or your equivalent. – Peilonrayz Sep 23 '17 at 12:09

## 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 HelpTroubleshooting 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.