CSS change font

Some sites attract users not with animations, images or photos, not video clips, but only with their textual content. Text is an inseparable content of many popular sites. In the previous lessons, we looked at CSS properties that allow you to change the color of the text, add a shadow to it, align it and add an underline, overline to it, or even cross out it. In this lesson, you will learn what font families are and how to change the default text font.

The difference between the families of Sans-serif and Serif fonts:

PuzzleWeb.ru - this font is sans-serif

PuzzleWeb.ru - this font is serif

Font families in CSS

In CSS, fonts are divided into families, and each family consists of a set of fonts with common characteristics. There are only five font families:

The CSS font-family property allows you to change the default font. It usually contains a list of interchangeable fonts separated by commas belonging to the same family. If the font name consists of more than one word, then it must be specified in quotation marks. At the end of the list you usually specify the family name:

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Let's see how the browser processes the font list specified in our font-family property:

  1. First, it checks whether the Verdana font is installed on the computer and, if so, uses it as the font for the text inside the element (in our case inside the <body> element).
  2. If Verdana is not installed, it looks for the Helvetica font. In case of successful search uses it inside <body>.
  3. If the Helvetica is not installed, it looks for the Arial font. If it is on the computer, it applies it inside the <body>.
  4. Finally, if none of the specified fonts is found, the first font found by the browser on the computer from the sans-serif family is applied. In this way, the browser can determine the appropriate font from the family.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h1>CSS font-family property</h1>
    <p class="exserif">A paragraph using the Times New Roman font.</p>
    <p class="exsansserif">A paragraph that uses the Arial font.</p>
  </body>
</html>
Try it »

Note: when you select only one specific font, it is important to understand that the browser will only display it if the font is installed on the user's computer. If the font is not found, the text will be displayed in the font Times New Roman, which is set by default in all browsers.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen