I’ve found some more information about how to find out what the name of a font might be on different systems in order to list it in a CSS font-family font stack.
PostScript Font Names
First things first — information you will find elsewhere will tell you that some systems (combinations of Operating Systems and browsers) will only be able to find a font based on its PostScript font name. Several other bloggers have shown how to view the PostScript name or have recorded the PostScript name of a particular font. But how do you figure out what the PostScript font name is if you don’t have the font or if you can’t view the PostScript font name for some reason?
Luckily there are rules that will allow you to anticipate the PostScript font name! This PDF about font names from Adobe will explain the challenges and rules of font naming and this other PDF contains a list of font names for quick reference. So that takes care of the PostScript font name. There’s also some information about PC font names in that document which may prove illuminating.
So, if you’re just trying to get Helvetica Neue to show up for Mac users, it’s simple. You can find it directly, or use the guide above.
Font File Font Names
Next comes Windows. This section isn’t actually restricted to Windows, but I know that Windows uses the font name as specified in the font installed. So, yeah.
While researching I learned a little tip I hadn’t known before; when viewing your Windows font folder change the view type to “Detail” and you will be able to see both the font file name and the name coded into that font file. This is, unfortunately, where it begins to get annoyingly complicated again. Depending on the font file format, the source the font was downloaded from, and other variations, a font can end up with a completely different name. Check this out:
I was able to compile this example graphic with the help of several coworkers’ and designer friends’ fonts. Some people had TrueType, some OpenType, some PostScript Type 1, some the LinoType cut, some Central European, etc. All of this coincides with an article I’d come across in my initial research about the different versions of Helvetica. All of those are relatively standard versions of the same font! But Windows recognizes them as being different with different names because that’s how the name is coded into the font file. Ouch.
So far, I haven’t found any way to be able to anticipate the font name (aside from Helvetica Neue, because of that link) in this sort of situation. You can view it if you have the font. But you won’t be able to check every viewer and their install may be a slightly different version. You might be able to look up the common versions of a font on the font foundry website.
Beyond that, there isn’t much you can do without
Grasping at Font Stacks
So I’ve got a pattern that should work fairly well across the board for Helvetica Neue:
font-family: "Helvetica Neue CE <Num> <Variant>", "Helvetica Neue LT <Num> <Variant>", "Helvetica Neue <Num> <Variant>", "HelveticaNeue-<Variant>", "Helvetica Neue <Variant>", "Helvetica Neue", "<Alternative (Linux/Mac/Win)>", "<Alternative (Linux/Mac/Win)>", "<Alternative (Linux/Mac/Win)>", sans-serif; font-weight: <Number Weight>; font-stretch: <Stretch Keyword>;
font-weight: <Number Weight>
The first is the Helvetica Neue weight (i.e. Helvetica Neue Medium), the second is the corresponding numerical CSS font-weight.
- Black – 800
- Heavy – 700
- Bold – 600
- Medium – 500
- Regular – 400
- Light – 300
- Thin – 200
- Ultra Light – 100
font-stretch: <Stretch Keyword>
The stretch keyword will correspond with the font variant (i.e. Helvetica Neue Extended).
Helvetica Neue <Num(ber)>
Refer to Helvetica Names for numbers and variants on the font name.
While the font stacks above are more robust than my last attempt, they are still quite ugly and impossible (for me) to commit to memory. With
@font-face support improving every day, it may be possible to utilize it to alias local fonts for use in CSS font-family font stacks without actually doing any embedding.
Here are a few links I’m saving to maybe look at for that reason later.