CSS Font

Next ❯CSS List

Used to style the text appearance

  • turned_in_notFont Properties
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
    • font

font-family

It specifies font for an element and can hold several font names as "backup font" (separated by comma). If the browser does not support the first font, it tries the next font and so on.

  • So, start with the font you want &
    If any font name contains white-space, it must be quoted by single or double quote
  • If no font found as specified then it uses the browser default font
  • turned_in_not2 Types of font-family names
    • labelFont Family
      • Some specific font families, different look

      A

      Arial

      A

      Aharoni

      A

      Chiller
    • labelGeneric Family
      • Group of similar look font families

      A

      Serif      

      A

      Sans-serif

      A

      Monospace

Syntax

font-family: 1stFontName, 2nFontName, .... , NthFontName;
/*Example*/
font-family: arial, roboto, monospace;

*You can get/use free font families from google fonts




Checkout Font !

p {
  font-family: serif;
  font-size: xx-large;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}
Fontsubject
Fontclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
p {
  font-family: serif;
  font-size: xx-large;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}
</style>
</head>
<body>
  <p style="text-align: center;">Checkout Font !</p>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    font-family:
    font-size:
    font-style:
    font-variant:
    font-weight:

Checkout Text Font !

p {
/*font: style   variant  weight size family;*/
  font: italic small-caps bold large arial;
}
font (All-In-One)subject
font (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
p {
/*font: style   variant  weight size family;*/
  font:italic small-caps bold large arial;
}
</style>
</head>
<body>
  <p style="text-align: center;">Checkout Text Font !</p>
</body>
</html>
  • 'font' property must required 'size' and 'family' to work

  • CSS List
❮ Prev CSS Text
Next ❯CSS List
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯