Font Stacking With CSS

by on August 18, 2016 · 0 comments

font stacking featured

When setting fonts on a website it is important to remember not all users share the same pool of typefaces. If a user does not have the primary specified font the type will be displayed in a “fall back” typeface.

CSS font stacking comes to the rescue by allowing you to set a hierarchy of fonts for browsers to render. If the first is not available the browser will attempt to render the second. Taking the time to consider your font stacking helps to ensure your typography choices are available to all users. Today we will explore how to control your font stacking with CSS.

You can address this problem with the CSS font-family property. The font-family property specifies the primary font of an HTML element (h1, body, paragraph etc.), and the fonts to be used if the primary font is not available.

Font-family CSS Property:

The font-family CSS declaration allows us to establish a hierarchy list that orders the fonts to be used for rendering an HTML element. If the browser does not support the primary font, it will try to load the next font in the list. This process will continue until the browser finds a font listed that it supports. This is sometimes referred to as “Font Stacking”.

The order in which you list fonts is very important as it will define the order of the fonts to be used. Start with the primary font you would like to use, and then list a series of “fallback” options to be used, separated by commas.

It is also vital to end the list of font families with a generic font family choice such as “Serif” or “Sans-serif”. These generic font families will be available in all modern browsers.

Types of Font Family Names:

There are two main types of font family names, Generic Family and Font Family.

  • Generic Family: a group of font families with a similar design and classification (like “Serif” or “Monospace”)
  • Font Family: a specific font family (like “Helvetica” or “Courier”)
E2W Pro-tip:

When writing your font-family CSS delcaration you will run into font families that contain more than one word. To write valid CSS code, the multi-word font name must be written surrounded with quotation marks. Example: “Myriad Pro”

Font-family CSS Example:

font-family css snippet3

Let’s take a look at an example CSS rule that will style all paragraph text with the desired font-family (Futura). This example also sets a series of “fallback” fonts (Brandon Grotesque, Franklin Gothic, and the generic font family sans-serif) that will be used if Futura is not available to the end browser.

Here is the text of the code snippet if you would like to copy it into your editor:

p {
font-family: Futura, “Brandon Grotesque”, “Franklin Gothic”, sans-serif
}

Conclusion:

Understanding the font-family CSS property is key to controlling the typographic presentation of your website project, ensuring a beautiful design for all visitors. Combining the font-family CSS property with the huge library of available webfonts from font streaming services (such as Adobe Typekit and Google Fonts) will elevate your typographic designs to something truly special.

If you are interested in learning more about Typography, please join us August 18th, 2016 at 5pm PT / 8pm ET for our Typography 101 Workshop: Webfonts. To view the Expand2Web summer class schedule, please visit: www.expand2web.com/blog/expand2web-summer-class-schedule/

If you aren’t already an Expand2Web Experts Group Member and would like more information on joining, please visit: https://www.expand2web.com/coaching-and-training/

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, and the GetFiveStars Customer Feedback and Reviews service.

Don has written 313 articles on Expand2Web

Author Connect » Twitter | | Facebook |

See my disclosure about advertising and affiliate links

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: