CSS Font Properties

Here, we look at the various font properties. These are the properties in the font namespace — those that include the word font at the start of their name.

CSS font properties enable you to change the look of your text. For example, you can assign a font family, apply bold or italic formatting, change the size and more.

CSS Font Family

The font-family property allows you to set the font family.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-family: Georgia, Garamond, serif;
  }
</style>

<p>This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p>

The font-family property accepts a list of different font families. This is because, not all users will have the same fonts installed on their computer. Therefore, as a designer/developer, you can provide a list of fonts, starting with your first choice, and ending with your last choice.

So, if the user doesn't have your first choice font, the second choice will be used for that user. If they don't have the second choice, the third choice will be used, and so on.

It's good practice to make your last choice a generic font family such as serif or sans-serif (depending on whether you want a font with serifs or not). This way, if none of the other choices are on the user's computer, their computer will choose a font that is on their computer, based on the generic family that you provide.

CSS Font Size

Enables you to set the size of the text. For info on the possible values, see the font-size page.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-size: 30px;
  }
</style>

<p>This text is using a font size of 30 pixels.</p>

CSS Font Size Adjust

This property enables you to adjust the x-height to make fonts more legible. For more info, see the font-size-adjust page.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-size: 12px;
    font-size-adjust: 0.58;
  }
</style>

<p>This text is using a font-size-adjust value.</p>

CSS Font Stretch

This property relies on the user's computer to have an expanded or condensed version of the font being used. For all possible values, see the font-stretch page.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-stretch: ultra-expanded;
  }
</style>

<p>If your computer has an expanded version of the font being used, this text will be stretched.</p>

CSS Font Style

The font-style property is used for specifying italic text.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-style: italic;
  }
</style>

<p>This text is in italics.</p>

CSS Font Variant

Enables you to set your text to use small caps. See font-variant.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-variant: small-caps;
  }
</style>

<p>This Text Is Using Small Caps.</p>

CSS Font Weight

Enables you to set your text to bold. For more info, see font-weight.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-weight: bold;
  }
</style>

<p>This text is bold.</p>

CSS Font Property

The font property is a shorthand property that enables you to set all font properties in one go.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font: italic small-caps bold 20px Georgia, Garamond, serif;
  }
</style>

<p>The styles for this text has been specified with the 'font' shorthand property.</p>