CSS Fonts


The Font CSS gives you great control over the way your text is displayed. You can change the text size, color, style, and more.

PropertyDescription
font-sizeThe font-size property is used to increase or decrease the size of a font.
font-familyThe font-family property is used to change the face of a font.
font-StyleThe font-style property is used to make a font italic or oblique.
font-variantThe font-variant property is used to create a small-caps effect.
font-weightThe font-weight property is used to increase or decrease how bold or light a font appears.
font-stretchThe font-stretch CSS property selects a normal, condensed, or expanded face from a font
fontThe font property is used as shorthand to specify a number of other font properties

Font Size

The font-size property enables you to specify a size for the font.

The font-size value can be an absolute, or relative size.

Absolute size:
  • Sets the text to a specified size
  • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
  • Absolute size is useful when the physical size of the output is known
Relative size:
  • Sets the size relative to surrounding elements
  • Allows a user to change the text size in browsers

Syntax

font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Example

<html>
     <head>
        <style type="text/css">
        .one{
        font-size:10px;
        }
        .two{
        font-size:20px;
        }
        .three{
        font-size:30px;
        }
        </style>
        </head>
        <body>
        <p class="p1">Ashwani</p>
        <p class="p2">Sachin</p>
        <p class="p3">Welcome to CSS Tutorial</p>
     </body>
    </html>
Output

Ashwani

Sachin

Welcome to CSS Tutorial


Top

Font Family

The font family of a text is set with the font-family property.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Syntax

font-family: font|initial|inherit;
Generic font name Type of font Example
serif Fonts with serifs Time
sans-serif Fonts without serifs Arial
monospace Fixed-width fonts Curier
cursive Fonts that emulate handwritting Comic Sans
fantasy Decorative fonts for title and so on Impact

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".

More than one font family is specified in a comma-separated list:

 .one{
        font-family:arial,verdana,sans-serif;
     }

Example of font-Family

<html>
     <head>
        <style type="text/css">
        .one{
        font-family:arial,verdana,sans-serif;
        }
        .two{
        font-family:courier new;
        }
        .three{
        font-family:impact;
        }
        </style>
        </head>
        <body>
        <p class="p1">Ashwani</p>
        <p class="p2">Sachin</p>
        <p class="p3">Welcome to CSS Tutorial</p>
     </body>
    </html>
Output

Ashwani

Sachin

Welcome to CSS Tutorial


Top

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Syntax

font-style: normal|italic|oblique|initial|inherit;

Example of font-style

<html>
     <head>
        <style type="text/css">
        .one{
        font-style:normal;
        }
        .two{
        font-style:oblique;
        }
        .three{
        font-style:italic;
        }
        </style>
        </head>
        <body>
        <p class="p1">Ashwani</p>
        <p class="p2">Sachin</p>
        <p class="p3">Welcome to CSS Tutorial</p>
     </body>
    </html>
Output

Ashwani

Sachin

Welcome to CSS Tutorial


Top

Font Variant

The font-variant CSS property selects a normal, or small-caps face from a font family.

Syntax

font-variant: normal|small-caps|initial|inherit;
Value Description
normal The browser displays a normal font. This is default
small-caps The browser displays a small-caps font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example of font-variant

<html>
     <head>
        <style type="text/css">
        .one{
        font-variant:normal;
        }
        .two{
        font-variant:inherit;
        }
        .three{
        font-variant:small-caps;
        }
        </style>
         </head>
        <body>
        <p class="p1">Ashwani</p>
        <p class="p2">Sachin</p>
        <p class="p3">Welcome to CSS Tutorial</p>
     </body>
    </html>
Output

Ashwani

Sachin

Welcome to CSS Tutorial


Top

Font Weight

The font-weight property sets how thick or thin characters in text should be displayed.

Syntax

font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Value Description
normal Defines normal characters. This is default
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100
200
300
400
500
600
700
800
900
Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example Font

<p style="font-weight:bolder";>
Welcome to CSS Tutorial
</p>
Output

Welcome to CSS Tutorial


Top

Font Stretch

The font-stretch CSS property selects a normal, condensed, or expanded face from a font.

Syntax

font-stretch: normal|small-caps|inherit;

This property does not change the geometry of an arbitrary font by stretching or shrinking it.

Example of font-stretch

<html>
     <head>
        <style type="text/css">
        .one{
        font-variant:normal;
        }
        .two{
        font-variant:inherit;
        }
        .three{
        font-variant:small-caps;
        }
        </style>
         </head>
        <body>
        <p class="p1">Ashwani</p>
        <p class="p2">Sachin</p>
        <p class="p3">Welcome to CSS Tutorial</p>
     </body>
    </html>
Output

Ashwani

Sachin

Welcomoe to CSS Tutorial


Top

Font

The font property is used as shorthand to specify a number of other font properties.

Example Font

<p style="font:italic small-caps bold 15px georgia";>Welcome to CSS Tutorial</p>
Output

Welcome to CSS Tutorial


Share this article on