ЦРИТО МФТИ
Free CSS course. Sign Up for tracking progress →

CSS: Font family

Many people are familiar with the phrase "playing around with fonts," it's great to remember when you can't get the text to look right. In order to specify a font, the font-family rule is used, allowing you to select one or more fonts to be used in the document.

<style>
  .new-font {
    font-family: Arial, Futura;
  }
</style>

<p class="new-font">Paragraph</p>

You can use fonts installed on your system. You should choose “common fonts” because other users may not have any other fonts. It is also possible to include fonts from third-party services such as Google Fonts, or to upload them directly to the server where the site is located.

The most common fonts are:

  • Times New Roman
  • Arial
  • Tahoma
  • Verdana
  • Courier New

More often than not, these fonts will also be installed on other users' systems. If the fonts specified in the font-family property are not on the computer, the default font specified in the browser settings will be used.

When adding styles, it's good practice to add a universal font family to the font-family rule. There are currently 5 such families:

  • serif - fonts with serifs. Times New Roman is a notable example
  • sans-serif - fonts without serifs. The most familiar of these fonts are Arial and Verdana.
  • cursive - italic fonts
  • fantasy - decorative fonts. This family is the least frequently used. This is because decorative fonts are too different to be interchangeable
  • monospace - monospace fonts. These include fonts in which all characters have the same width. They're often used by programmers in text editors

By adding a universal font family to the font-family rule, we can insure ourselves, as it were, against the possibility that the user will not have the font we specified. The browser will automatically choose a replacement for the missing font from the universal font family that was specified.

The example from the beginning of the lesson for adding a universal family would look like this:

<style>
  .new-font {
    font-family: Arial, Futura, sans-serif;
  }
</style>

<p class="new-font">Paragraph</p>

Now, if the user does not have Arial or Futura fonts in the system, their system's sans serif font will be selected.

Instructions

Add a paragraph to the editor with the class set to verdana-text and set its font to Verdana. Write the styles in the <style> tag. Don't forget to specify the universal font family as sans serif fonts

Tips

  • The font family is always the last thing you do