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:
- sans-serif are fonts without serifs, it is considered that they are better readable on the computer screen than the fonts of the serif family.
- serif is a font family with serifs. Many people associate them with newspaper articles. Serifs are decorative strokes and dashes around the edges of letters.
- monospace is a family consisting of fonts whose symbols have the same fixed width. These fonts are used primarily to display code examples of the program.
- cursive is a font that simulates handwritten text.
- fantasy are artistic and decorative fonts. They are not very widespread, are not available on all computers and are rarely used in web design.
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:
- 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). - If
Verdana
is not installed, it looks for theHelvetica
font. In case of successful search uses it inside<body>
. - If the
Helvetica
is not installed, it looks for theArial
font. If it is on the computer, it applies it inside the<body>
. - 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
, which is set by default in all browsers.Times New Roman
With this theme look: