CSS Fonts

CSS Fonts is a module of CSS that defines font-related properties and how font resources are loaded. It lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character.

Basic example

The following example shows a simple use of basic font properties to style a paragraph of text.

p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial",  sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}

<p>Three hundred years ago<br>
  I thought I might get some sleep<br>
  I stretched myself out onna antique bed<br>
  An' my spirit did a midnite creep</p>

The result is as follows:

Variable fonts examples

You can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our Variable fonts guide for more information and usage information.

Reference

Properties

At-rules

@font-face

• font-family
• font-feature-settings
• font-style
• font-variant
• font-weight
• font-stretch
• src
• unicode-range

@font-feature-values

Guides

Fundamental text and font styling

In this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

OpenType font features guide

Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. This article provides you with all you need to know about using OpenType font features in CSS.

Variable fonts guide

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.

Specifications

Browser compatibility

Many of the basic font properties (such as font-weight and font-style) are well-supported across browsers, but some of the newer features still have more limited support. For the full story you'll have to look at the browser compatibility information on the individual reference pages.