CSS Fonts Tutorial

CSS Fonts is on of the most important property of CSS. CSS Fonts make font sizing, styling, weight, boldness and more css font styling.

By this tutorials you can learn

1) How to use CSS Fonts?

3) Kinds of Font Family Property?

2) Example of CSS Fonts Style.

How to use CSS Fonts?

CSS Fonts use in a style code area - like: font: 16px font-family; Where font = property name; 16px = font size; font-family= font name;

Kinds of CSS Fonts Property Style?

1) font-family: Sans-Serif- for use control Font Family.

2) font-weight: bold - for use control font style boldness.

3) font-stretch: normal - for use control font style stretch.

4) font-size: 20px - for use control font sizing.

5) font-style: italic or normal or oblique- for use control font italic.

6) font-variant: small-case - for use small case font.

CSS Font Family

CSS Fonts style examples.

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Fonts Family.</title>
  <style type="text/css">
    .saf h1{font-family:Agency FB;}
  </style>
</head>
<body>
<div class="saf">
<h1>Example for font family.</h1>
</div>
</body>
</html>

Copy code and try to Editor

Example of CSS Fonts Styles.

Example for font family.

CSS Font Weight

CSS Fonts Weight examples.

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Fonts Weight.</title>
  <style type="text/css">
    .saf p{font-weight:bold;}
                .saf1 p{font-weight:normal;}
                .saf2 p{font-weight:700;}
  </style>
</head>
<body>
<div class="saf"><p>Example for Font Weight Bold.</p></div>
<div class="saf1"><p>Example for Font Weight Normal.</p></div>
<div class="saf2"><p>Example for Font Weight 700.</p></div>
</body>
</html>

Copy code and try to Editor

Example of CSS Fonts Styles.

Example for Font Weight Bold.

Example for Font Weight Normal.

Example for Font Weight 700.

CSS Font Size

CSS Fonts Size examples.

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Fonts Size.</title>
  <style type="text/css">
    .saf3 p{font-size:80%;}
                .saf4 p{font-size:36px;}
                .saf5 p{font-size:1em;}
  </style>
</head>
<body>
<div class="saf3">Example for font-size using (%)like 90% of page font.</p></div>
<div class="saf4">
Example for font-size using (px)like 24px of page font.</p></div>
<div class="saf5">
Example for font-size using (em)like 1em of page font.</p></div>
</body>
</html>

Copy code and try to Editor

Example of CSS Fonts Styles.

Example for font-size using (%)like 90% of page font.

Example for font-size using (px)like 24px of page font.

Example for font-size using (em)like 1em of page font.

CSS Font Style

CSS Fonts Style examples.

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Fonts Style.</title>
  <style type="text/css">
    .saf6 p{font-style:normal;}
                .saf7 p{font-style:italic;}
                .saf8 p{font-style:oblique;}
  </style>
</head>
<body>
<div class="saf6"><p>Example for font-style using font style (normal).</p></div>
<div class="saf7"><p>Example for font-style using font style (italic).</p></div>
<div class="saf8"><p>Example for font-style using font style (oblique).</p></div>
</body>
</html>

Copy code and try to Editor

Example of CSS Fonts Styles.

Example for font-style using font style (normal).

Example for font-style using font style (italic).

Example for font-style using font style (oblique).

CSS Font Variant

CSS Fonts Style examples.

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Fonts Variant.</title>
  <style type="text/css">
    .saf9 p{font-variant:normal;}
                .saf10 p{font-variant:small-case;}
  </style>
</head>
<body>
<div class="saf9"><p>Example for font-variant using (normal).</p></div>
<div class="saf10"><p>Example for font-variant using (variant).</p></div>
</body>
</html>

Copy code and try to Editor

Example of CSS Fonts Styles.

Example for font-variant using (normal).

Example for font-variant using (small-case)