CSS Fonts

CSS Font Property is used to control the look of Fonts. Font Properties and Text Property Both Contents Contain Visual Appearance of Content. From the CSS Font Property you can set the font color, size, weight etc.

Font Properties

To customize the Fonts, CSS offers a number of different Font Properties, which are being explained below.

Font Family

This property is used to declare the Font Family of any HTML Element.

There are two types of Font Family in CSS:

  1. Generic Font Family – This Font Family includes groups of similarly-looking Font Families.
  2. Font Family – There is only one Particular Font Family.

font-family Property lets you declare more than one Font Families. This is done because of browsers, because all browsers do not support all the fonts.

If the font name contains more than one word, then it is written within the Quotation Marks (” “). like; “Times New Roman” More than one Font Families are separated by Comma (,).

Example

p {
    font-family: "Times New Roman", Times, serif;
}

Font Style

font-style property is used to declare the style of the font, This is how you want to see the Fonts. This is done mostly by Italicize Fonts.
It has three potential Values:

  1. normal
  2. italic
  3. oblique

Example

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

Font Size

This property is used to control font size. Its possible value can be xx-small, x-small, small, small, medium, large, big, x-large, xx-large, in pixels, in % and in ems.

Font Size Example with Keywords

body {
    font-size: large;
}

h1 {
    font-size: larger;
}

p {
    font-size: smaller;
}

Font Size Example with Pixels

h1 {
    font-size: 24px;
}

p {
    font-size: 14px;
}

Font Size Example with Em

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}

p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

Font Weight

This Font property is used to declare the weight of the Fonts. This is how much your font will be Bold.

It has bold, bolder and lighter potential values. Also you can Declare Custom Weight E.g., 100, 300, 500, 700 etc.

Example

p {
    font-weight: bold;
}

Font Variant

This property is Declare the Fonts of the Variant. It has two potential Values:

  • normal – The font is normal in it.
  • small-caps – In this, the size of the Fonts is smaller than the other Fonts and the Fonts are converted to Uppercase.

Example

p {
    font-variant: small-caps;
}