CSS Font Properties

CSS Font properties are various type like font-family, font-size, font-style, font-weight properties and many more.

Using CSS font properties you can change the font formatting style. Here are some CSS font properties listed.

CSS font-family

CSS font-family property to define font face name with one or more font. Single Quote (' ') is first priority to apply first. If that font not available then left to right optional apply (eg. Courier).

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Family</title>
</head>
<body>
  <p style="font-family: 'Courier New', Courier, monospace;">This text is represent font family property.</p>
</body>
</html>

Run it...   »

CSS font-size

CSS font-size property set the font size.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Size</title>
</head>
<body>
  <p style="font-size: 18px;">This text is represent font size property.</p>
</body>
</html>

Run it...   »

CSS font-style

CSS font-style property use to set font style like normal, italic, oblique.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Style</title>
</head>
<body>
  <p style="font-style: normal;">This text is normal style</p>
  <p style="font-style: italic;">This text is italic style</p>
  <p style="font-style: oblique;">This text is oblique style</p>
</body>
</html>

Run it...   »

CSS font-weight

CSS font-weight property use to set font weight like bold, bolder, lighter.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Weight</title>
</head>
<body>
  <p style="font-weight: normal;">This text font weight normal.</p>
  <p style="font-weight: bold;">This text font weight bold.</p>
  <p style="font-weight: lighter;">This text font weight lighter.</p>
</body>
</html>

Run it...   »

CSS font-variant

CSS font-variant property set word first capital letter can be display in variant style.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Font Variant</title>
</head>
<body>
  <p style="font-variant: small-caps">This text is represent font variant.</p>
</body>
</html>

Run it...   »