CSS fonts

{{CSSRef}} 

The CSS fonts module 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, and the glyph variants to use when multiple are available for a single character.

A font is a resource file containing the visual representation of characters, mapping character codes to glyphs that represent letters, numbers, punctuation and even emojis of a typeface. A font family is a group of fonts that share common design styles and font properties, with each member of the group providing different ways of displaying the glyphs, varying by stroke weight, slant, or relative width, among other attributes. A font typically represents a single style of a typeface, such as Helvetica that is Bold and Italic. A font family is the complete set of styles. Including such a font in a document or design is done by defining a separate @font-face declaration for each font resource.

The properties, at-rules, and descriptors of the CSS fonts module enable the downloading of multiple variations of a font. They also define the font file to use for a particular font characteristic, along with fallback instructions in case a resource fails to load. The CSS font selection mechanism describes the process of matching a given set of CSS font properties to a single font face.

The CSS fonts module also supports variable fonts. Unlike regular fonts, where each style is implemented as a separate font file, variable fonts can contain all styles within a single file. By using a single @font-face declaration, you can import a variable font that includes all the styles. Depending on the font, this can include a multitude of font variants. Variable fonts are a part of the OpenType font specification.

Reference

Properties

• {{cssxref("font")}}  shorthand

• {{cssxref("font-family")}} 

• {{cssxref("font-feature-settings")}} 

• {{cssxref("font-kerning")}} 

• {{cssxref("font-language-override")}} 

• {{cssxref("font-optical-sizing")}} 

• {{cssxref("font-palette")}} 

• {{cssxref("font-size")}} 

• {{cssxref("font-size-adjust")}} 

• {{cssxref("font-stretch")}} 

• {{cssxref("font-style")}} 

• {{cssxref("font-weight")}} 

• {{cssxref("font-synthesis")}}  shorthand

• {{cssxref("font-synthesis-position")}} 

• {{cssxref("font-synthesis-small-caps")}} 

• {{cssxref("font-synthesis-style")}} 

• {{cssxref("font-synthesis-weight")}} 

• {{cssxref("font-variant")}}  shorthand

• {{cssxref("font-variant-alternates")}} 

• {{cssxref("font-variant-caps")}} 

• {{cssxref("font-variant-east-asian")}} 

• {{cssxref("font-variant-emoji")}} 

• {{cssxref("font-variant-ligatures")}} 

• {{cssxref("font-variant-numeric")}} 

• {{cssxref("font-variant-position")}} 

• {{cssxref("font-variation-settings")}} 

The specification also defines the font-width property, which is not yet supported by any browser.

At-rules and descriptors

• At-rule: {{cssxref("@font-face")}} 

  • : Descriptors:
    • {{cssxref("@font-face/ascent-override", "ascent-override")}} 
    • {{cssxref("@font-face/descent-override", "descent-override")}} 
    • {{cssxref("@font-face/font-display", "font-display")}} 
    • {{cssxref("@font-face/font-family", "font-family")}} 
    • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} 
    • {{cssxref("@font-face/font-stretch", "font-stretch")}} 
    • {{cssxref("@font-face/font-style", "font-style")}} 
    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} 
    • {{cssxref("@font-face/font-weight", "font-weight")}} 
    • {{cssxref("@font-face/line-gap-override", "line-gap-override")}} 
    • {{cssxref("@font-face/size-adjust", "size-adjust")}} 
    • {{cssxref("@font-face/src", "src")}} 
    • {{cssxref("@font-face/unicode-range", "unicode-range")}} 

The specification also defines the font-language-override, font-named-instance, font-width, font-size, subscript-position-override, subscript-size-override, superscript-position-override, and superscript-size-override descriptors, which are not yet supported by any browser.

• At-rule: {{cssxref("@font-feature-values")}} 

  • : Descriptor:
    • {{cssxref("@font-feature-values/font-display", "font-display")}} 

• At-rule: {{cssxref("@font-palette-values")}} 

  • : Descriptors:
    • {{cssxref("@font-palette-values/base-palette", "base-palette")}} 
    • {{cssxref("@font-palette-values/font-family", "font-family")}} 
    • {{cssxref("@font-palette-values/override-colors", "override-colors")}} 

Data types

font-size types:

• {{cssxref("absolute-size")}} 
• {{cssxref("relative-size")}} 

font-family type:

• {{cssxref("generic-family")}} 

font-feature-settings type:

• <feature-tag-value>

font-format type:

• <font-format>

font-stretch type:

• <font-stretch-css3>

font-tech types:

• <color-font-tech>
• <font-features-tech>
• <font-tech>

font-variant types:

• <font-variant-css2>
• <east-asian-variant-values>
• <east-asian-width-values>

font-variant-ligatures types:

• <common-lig-values>
• <contextual-alt-values>
• <discretionary-lig-values>
• <historical-lig-values>

font-variant-numeric types:

• <numeric-figure-values>
• <numeric-fraction-values>
• <numeric-spacing-values>

font-weight type:

• <font-weight-absolute>

Interfaces

• {{domxref("CSSFontFaceRule")}} 
• {{domxref("CSSFontFeatureValuesRule")}} 
• {{domxref("CSSFontPaletteValuesRule")}} 

Guides

• Learn: Fundamental text and font styling

  • : This beginner’s learning article covers the basic fundamentals of text and font styling. It covers how to set the font weight, family, and style by using the {{cssxref("font")}}  shorthand and how to align text and manage line and letter spacing.

• Learn: Web fonts

  • : This beginner’s learning article explains how to use custom fonts on your web page to allow for more varied and custom text styling.

• 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 — {{cssxref("font-feature-settings")}} . This article provides you with all you need to know about using OpenType font features in CSS.

• Variable fonts guide

  • : This article will help you get started with using variable fonts.

• Improving font performance

  • : This article, part of the CSS performance guide, discusses font loading, loading only the required glyphs, and defining font display behavior with the font-display descriptor.

Related concepts

• {{cssxref("letter-spacing")}}  CSS property
• {{cssxref("line-height")}}  CSS property
• {{cssxref("text-transform")}}  CSS property

Specifications

{{Specifications}} 

See also

• CSS font loading module
• CSS font loading API
• CSS text module
• CSS writing modes module