This property can hold one or multiple font names in its declaration. There is no limit as to how many font names it can hold; however, it is not only very unlikely to list more than four or five fonts, but it's also unnecessary.

The font family names are separated by commas. We call this the font stack. The browser will read the font stack and use the first one in the stack, if it can't find it or download it, it will move on to the next font family name and so on until it's able to use one from the stack.

There are two types of font family names: family name and generic family name.

.element {
  font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
}

The font-feature-settings CSS property allows us to control and use other alternative glyphs that come included in some font files.

An example of an alternate glyph is for example when we type the fractions 1/2 or 1/4 the font actually includes the "small superscript" version like ½ and ¼. Or if we type H₂O it turns into H₂O.

Remember, not all fonts contain special glyphs (font features).

To find out what font features a font file has, you can use any of these two tools:

Here are some of the most common feature tags:

For more information, check out the MDN website: http://tiny.cc/mdn-font-feature-settings

For a complete list of all font features, check the Microsoft site at http://tiny.cc/msn-font-features-list

CSS:

/*Small capitals*/
.element {
  font-feature-settings: "smcp";
}

This property can also be used to change the size of other elements since we can compute the value of em, rem, and ex length units as well.

There are a few different value types that we can use with the font-size CSS property: absolute keywords/size, relative size, length, and percentage.

/*Absolute keywords/size*/
.element { font-size: x-small; }
/*Relative size*/
.element { font-size: smaller; }
/*Length value*/
.element { font-size: 18px; }
/*Percentage value*/
.element { font-size: 62.5%; }

In the font stack, the font sizes can be different from one font to the other, thus the styling of the text can considerably vary from the intended design. With the font-size-adjust CSS property, we can solidly predict that the font sizes are consistent when the browser uses any font from the font stack.

This property accepts a numeric value without a unit. It can also accept decimal values.

A great online tool that can do this for us is Fontdeck's font-size-adjust web app: http://fontdeck.com/support/fontsizeadjust.

CSS:

.element {
  font-size-adjust: .5;
}

The font-stretch property doesn't just stretch the font to whatever we tell it to. It looks for an actual face inside the font file that matches the declared style; or at that is as close as possible.

This property supports the following values:

CSS:

.element {
  font-stretch: condensed;
}

The font-style property accepts the following values: normal, italic, and oblique.

Let's clear up the difference between italic and oblique.

According to the spec:

This means that when we declare the font style italic, the browser will look for the italic face of the font and use that face. A good example of this is the typeface Georgia; when we use the italic property, we can clearly see that it's an actual italicized face rather than making the normal face oblique.

Oblique makes the Normal face slanted or inclined in order to simulate italics.

CSS:

.element {
  font-style: italic;
}

The font-variant property is considered a shorthand in CSS3 and has been extended with new values, which developers rarely use.

One thing to note is that if the text is already in all caps and we apply the small-caps property to it, the text will not change; it will continue to be in all caps.

The most used values are: normal and small-caps. Some of the additional values in CSS3 are small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, and titling-caps.

For more information, check out the MDN website: http://tiny.cc/mdn-font-variant

CSS:

.element {
  font-variant: small-caps;
}

The font-variant-ligatures are common in OpenType fonts.

The font-variant-ligatures property uses the following values: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual, and contextual.

For more information, check out the MDN website: http://tiny.cc/mdnfont-variant-ligatures

CSS:

.element {
  font-variant-ligatures: discretionary-ligatures;
}

This property accepts two types of values: a numeric value and a keyword value.

/*Numeric value*/
.element { font-weight: 200; }
/*Keyword value*/
.element { font-weight: bold; }

There are a few things to consider when using the font shorthand in order for it to work: