CSS3 Change Font Command – How To

There are thousands of different font types. Even though your browser may not have access to all these different fonts, you can still use the CSS3 change font command to gain control on how your font is displayed.

All the fonts can be grouped into three basic types. They are serif, sans-serif, and monospaced.

CSS3 Change Font Command on <h1> Tag

Play with some code to see how they will display on your HTML5 page. Remember, you add the command to your CSS3 file, which is connected to your HTML5 file. Add the command for the <h1> tag as follows:

h1 {
    font-family: sans-serif;
    font-size: 42pt;

Even though HTML5 has default settings for the font, you can change them with the CSS3 change font command.

Tye change sans-serif to serif and see how it affects the HTML5 page. Do you notice a difference?

There are many types of fonts within each category. You might guess that the serif category is what you usually see in a book. The most common type is Times New Roman. You can specify the type as follows:

font-family:”Times new roman” serif;

Most of the common types will be available in your browser. However, it might not be available in another user’s browser. You can select a specific type, but if it’s not available in your browser then it will default to one that is available.

The above paragraph basically outlines a general programming concept called ‘Graceful Degradation‘. This is where you specify your preference knowing a default would be used if your preference is not available.

This concludes a brief exploration on how to use the CSS3 change font command to control font display. You are doing well, so keep going!

Leave a Reply

Your email address will not be published. Required fields are marked *