How to Find Font Family Names for CSS


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.

Tips & Warnings

  • 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.

Related Searches


  • Photo Credit Jupiterimages/ Images
Promoted By Zergnet


You May Also Like

  • How to Style a Heading with CSS

    HTML5 includes heading tags ranging in size from the largest, <h1>, down to the smallest, <h6>. Browsers will display headings according to...

  • How to Determine the Font Name in a PDF File

    The Portable Document Format (PDF) file type is widely used in professional environments to circulate information in a format easily accessible to...

  • How to Embed TTF Fonts in CSS

    Embedded fonts are nothing new to Web design. Though font-replacement techniques such as Cufon and sIFR came into use around 2008, CSS...

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!