🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

Web Safe Fonts: Learn About Font Stacks and Font Families

Reading time 3 min
Published Aug 8, 2017
Updated Oct 2, 2019

TL;DR — Web safe fonts are fonts that work on the majority of operating systems. To ensure the best browser compatibility, you should learn to font stack: create lists of fonts in the order of preference.

What web safe fonts are

Web safe fonts refer to fonts installed into most of the operating systems. Therefore, there is a higher chance for web safe fonts to be presented equally to all users. CSS calls such fonts as generic font families.

However, since CSS3, developers can use web fonts for their websites. Web fonts allow you to set custom fonts to be downloaded with your web page. As a result, there are more options for styling texts.

Creating font stack

The CSS font stack refers to a list of fonts defined in the font-family declaration. Every font in the list is a fallback in situations when fonts cannot load.

Therefore, the CSS font stacks help you control the way your page looks in cases when the main font (first in the list) does not work on users' devices.

Here is an example of a CSS font list:

Example
p {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

Note: the CSS fonts lists should end with the generic name.

The following sections explain the five generic font families.

Serif fonts

font-family Text Example
Georgia, serif Example Heading

Example paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif Example Heading

Example paragraph

"Times New Roman", Times, serif

Example Heading

Example paragraph

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

Sans-serif fonts

font-family Text Example
Arial, Helvetica, sans-serif

Example Heading

Example paragraph

"Arial Black", Gadget, sans-serif

Example Heading

Example paragraph

"Comic Sans MS", cursive, sans-serif

Example Heading

Example paragraph

Impact, Charcoal, sans-serif

Example Heading

Example paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Example Heading

Example paragraph

Tahoma, Geneva, sans-serif

Example Heading

Example paragraph

"Trebuchet MS", Helvetica, sans-serif

Example Heading

Example paragraph

Verdana, Geneva, sans-serif

Example Heading

Example paragraph

Cursive fonts

font-family Example text
"Comic Sans MS", Comic Sans, cursive

Example Heading

Example paragraph

Apple Chancery, cursive

Example Heading

Example paragraph

Bradley Hand, cursive

Example Heading

Example paragraph

Brush Script MT, Brush Script Std, cursive

Example Heading

Example paragraph

Snell Roundhand, cursive

Example Heading

Example paragraph

URW Chancery L, cursive

Example Heading

Example paragraph

cursive

Example Heading

Example paragraph

Fantasy fonts

font-family Example text
Impact, fantasy

Example Heading

Example paragraph

Luminari, fantasy

Example Heading

Example paragraph

Chalkduster, fantasy

Example Heading

Example paragraph

Jazz LET, fantasy

Example Heading

Example paragraph

Blippo, fantasy

Example Heading

Example paragraph

Stencil Std, fantasy

Example Heading

Example paragraph

Marker Felt, fantasy

Example Heading

Example paragraph

Trattatello, fantasy

Example Heading

Example paragraph

fantasy

Example Heading

Example paragraph

Monospace fonts

font-family Example text
"Courier New", Courier, monospace

Example Heading

Example paragraph

"Lucida Console", Monaco, monospace

Example Heading

Example paragraph

FreeMono, monospace

Example Heading

Example paragraph

OCR A Std, monospace

Example Heading

Example paragraph