How to Find Font Family Names for CSS
By Sara Williams
Font family names identify fonts in cascading style sheets, or CSS. Since many fonts have variations, designers use the family name, such as Arial, Helvetica or Verdana, rather than the specific name of a font, such as Arial Black or Verdana Bold. Finding the family name for a font is simple because the family name is the name that font and all its variations have in common. Generic font families, such as sans serif and monospace, exist that, when named in CSS, allow the browser to pick a default font within the stated style.
Click the "Start" button on your taskbar, type "fonts" into the Search bar and press "Enter" to open your Fonts folder. Look for the font you want to use and take note of its name. For example, Arial --- a common Windows font --- has many font variations, along with a generic name of "Arial." Use the font family name Arial to use the generic Arial font, or specify Arial Narrow to use that specific font. In practice, you should use a generic font family name for most of a site's body text and then use more specific fonts for headers.
Add a generic font family name to your font stack. Font stacks are lists of font families in CSS, and web designers use them as backup fonts for when visitors do not have the most preferred font installed on their computer. Use the generic name "serif" to end font stacks that begin with serif fonts like Georgia or Times New Roman, and use "sans-serif" to end font stacks that begin with fonts like Helvetica or Verdana. Other generic names include "monospace," "cursive" and "fantasy." Note that generic font family names are irrelevant when you embed a font using @font-face.
Add quotation marks around font family names that are more than one word long. Single-word font names like Arial or Georgia do not require quotation marks. You can use single or double quotation marks, but be careful when mixing quotation types because this can lead to errors. Here is an example of how fonts are named in CSS:
body { font-family: "Helvetica Neue", Arial, sans-serif; }
The above font stack specifies that the browser should look for Helvetica Neue first. Designers choose this font because it does not exist on Windows computers that display regular Helvetica in an ugly fashion. Windows users will see Arial. Any other users will see a default sans-serif font based their on browser settings.
References
Tips
- Some famous designers, such as Paul Irish and Chris Coyier, now suggest doing away with font stacks and naming generic font families only, especially in the case of the common Helvetica, Arial and sans-serif stack. This is to respect user settings and, in the case of the example sans-serif stack, to save designers time since most browsers pick those fonts anyway.
Writer Bio
Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.