By using CSS we have the ability to easily control the fonts of our website. We as web designers or developers are limited to use certain fonts. We need to be careful in our font choices making sure we always use “browser safe fonts”. To make the best use of fonts we can customize and regulate the fonts that would like to use for each element of our page by using the font-family property. The font-family property can contain a set of fonts that share common characteristics, so we can make sure the user correctly sees our webpage’s content as we want to.

STEP ONE:

Let’s create a HTML page with a CSS linked. Add any content to your HTML page; for example, I added a heading and paragraphs tags:

STEP TWO:

In your linked CSS add the following property:

As you can see, I made a list of two sans-serif typefaces. If the user’s browser doesn’t support the Tahoma font, it tries Geneva font.
First, I specified the family-name, the name of the font’s family; such as, Tahoma. Then, I specified the generic-family, the name of the font’s style; such as, sans-serif.

Here is a list of the basic and most common “browser safe fonts” and their generic families:

  • Sans-serif Family: Arial, Arial Black, Trebuchet MS, Arial, Geneva, Helvetica.
  • Serif Family: Times, Times New Roman, Georgia, Palatino.
  • Monospace Family: Courier, Courier New, Andale Mono.
  • Cursive Family: Comic Sans.
  • Fantasy Family: Impact Webdings, Windings.

STEP THREE:

Now, let’s add a different font-family for the heading. Add an h1 specification in your CSS like shown below and add any font-family

Let’s learn interesting facts about the font-family property:

  • Each font family needs to be separated with a comma.
  • If the font family contains more than one word add quotes. For example, the font New Times Roman needs to be specified like, “Times New Roman”.
  • Do not mix font families. Bad example: Verdana, Times, Impact, cursive. Each font-family needs to contain fonts that share common characteristics.
  • Always finalize with the specification of the generic family.
  • You can specify as many fonts’ families you would like.
  • If none of the fonts you specified can be found (rarely occurs), the browser will use whatever generic family was specified.
  • The font-family property is supported in all browsers.

Now that you know how correctly specify the font-family property set up different font families and save them for your next web projects.

Download Source Files