×

Set Font Face Using font-family [5/16]

You can set the font family using the font-family property. You can indicate a specific font name in it, like: "Times New Roman". But you can also specify the font type you need, for instance:

  • serif, if you want to use a serif font;
  • sans-serif, to use a sans-serif font.

There are other font types, but they are used not so often.

Typically, the property lists several fonts comma-separated. The rarest font comes first in the list, then comes a similar but more common font, with the font type coming last. Here's an example:

body {
    font-family: "PT Sans", "Arial", serif;
}

The browser parses the list left-to-right and takes the first font found in the system.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Set Font Face Using font-family:</title> </head> <body> <h1>CSS Stages</h1> <p>In the second stage, the document is styled using the good old CSS to become neater: here the page layout, element font parameters, background images, etc., are introduced.</p> <p>In the third stage, new CSS3 specific features are used to bring the document to perfection: e.g., semi-transparent blocks, round corners, shadows. Also, CSS3 can enable various animations and decorations: fading or shifting of elements, form field highlight, etc.</p> </body> </html>
CSS
h1 { font-size: 24px; }
HTML Academy
  1. Change the heading font face to Tahoma.
  2. Change the paragraph font face to Arial.
Theory Check Next