CSS Fonts


Go to main Page

Fonts in CSS


Why font is important in webpage?

Selecting the right font on a webpage is important because the font has a huge impact on readers' experience of a website.

The right font can create a strong identity for your brand.

Fonts right size, right selection, and right color add value to our webpage.


Generic Font Families

There are five generic font families.

Generic Fonts Examples
Serif Serif text example here
Sans-serif Sans-serif text example here
Monospace Monospace text example here
Cursive Cursive text example here
Fantasy Fantasy text example here

Font family Property

For selecting a specific font we have to use a font-family property.

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems.

Example

Let us use the font-family property for two paragraphs:


        .p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

Using Font online

We can also use google fonts by importing them through googlefonts.com.

we have to select the font and copy its importing link and paste it in the top of our CSS.


        <style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');
body{
   font-family: 'Roboto', sans-serif;
}
</style>

        


Font Size Property

Font size property is used to increase or decrease the size of the text.

Example


        .p1 {
  font-size:20px;
}
.p2 {
  font-size:30px;
}