CSS Font Family

The CSS font family property is probably one of the most important CSS properties in relation to text and fonts on the net.

It allows us to change the style of the fonts on our web pages to suit our needs. There are a number of fonts we can use on the net, some better than others. It is important to remember that only a certain number of fonts are supported by each operating system.

This is where the font family property becomes flexible. It allows you to list multiple font families. If one or more of the fonts are not available CSS will allow the next font in line to take precedence.

Code

As mentioned above, you can write out fonts in a prioritised list. Take a look at the code below to see how to use the font family property.

font-family: family-name | generic-family;

In the example below we have assigned a specific font – Times New Roman. However we have also supplied a generic font family – Serif. If the Times New Roman font is not available then an alternative serif font may substitute it.

font-family:"Times New Roman", Times, serif;

Web safe fonts

Remember to try and use web safe fonts where possible. Click here to view a list of safe fonts.

Things to remember

1. The font you choose will only be available to the user if they have it installed on their computer.
2. You can get around the above problem by using the embed font feature. We will cover this in a future tutorial.
3. If the name of the font has a space in it, you will need to surround it with quotations(“ “). As we have in the Times New Roman example.