6

I've got a font installed on my computer. I want to check it doesn't look terrible in common browsers before deciding whether to set it up as a web font, buy they appropriate license, etc etc.

How do I find out what the name to put into css font-family: fontname will be? I've tried various variations on the font's name as it appears in software, but none work.

2 Answers 2

3

There might be an easier way, but this works:

  1. Find the original font file on your computer
  2. Copy the file name (except for the file extension)
  3. Paste that (don't forget to use quotes - single or double - if it contains any spaces)

Note that occasionally, some fonts append the font weight to the filename - if they do, 1. shake your fist and growl, then 2. use that full string for each weight, without a separate font-weight.

For example, if the font file name is crazeE-font2 thin.tff your css will look like:

font-family: 'crazeE-font2 thin';

On both Windows (8+) and Mac, the easiest way to find original files for installed fonts is just doing a search for "fonts" in the usual system-wide search box.

3
  • I think it'd be helpful to explicitly state where you "paste that" in step 3 Commented Dec 2, 2015 at 17:33
  • @ZachSaucier good call, editted Commented Dec 2, 2015 at 17:45
  • Not sure if it still holds true, but it used to be the case that certain different browsers took the font name from different sources. Some fonts were completely impossible to get to work on both Firefox and Chrome, for instance, because Firefox only accepted the PostScript name and Chrome only some other name (or maybe it was the other way around). If they've finally decided on a way they all accept now, that's good news. Commented Dec 3, 2015 at 0:14
1

Turns out this is not a question that can easily be answered completely, as noted by janus-bahs-jacquet, historically different browsers on different systems implement different systems to find the best or any appropriate font given font family name.

Even 'official' sources list this as 'informational only', rather than normative or prescriptive, but it's probably the best reference one can find:

https://drafts.csswg.org/css-fonts/#platform-props-to-css

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.