Font

This page lists the CSS properties to customize an element's font.

Basic Concepts

Font Display Timeline

Font display timeline begins when the browser attempts to use a given font. There are three periods:

• font block period — if the font is not loaded, temporarily render using an invisible text. (If the font succesfully loads, then use it normally.)
• font swap period — if the font is not loaded, temporarily render using a fallback font. (If the font succesfully loads, then use it normally.)
• font failure period — if the font is not loaded, treat it as a failed load, and render using a fallback font.

Font At-Rules

@font-face

Defines a custom font.

Required properties:

• font-family — Name of the font
• src — Source to the font data. Use local(...) to refer to a font name on the client's computer, or use url(...) to load from a URL.

Optional properties:

• font-display — Sets how a font is displayed in relation to its availability (is loading or has done loading). Specify one of: auto (let the browser decide); block (short block period, infinite swap period); swap (no block period, infinite swap period); fallback (super short block period, short swap period); optional (super short block period, no swap period).
• unicode-range — Sets the specific range of characters to be used from the font. Specify (in hexadecimal): a single codepoint (e.g. U+26), a codepoint range (e.g. U+0025-00FF), or a wildcard range (e.g. U+4??).
• font-variant — See below.
• font-weight — See below.
• font-stretch — See below.
• font-feature-settings — See below.
• font-variation-settings — See below.

@font-face {
  font-family: examplefont;
  src: local(Example Font),
    url('examplefont.woff') format('woff'),
    url('examplefont.otf') format('opentype');
}

Font Properties

font

Shorthand for the following properties. font-size and font-family are required.

• font-style
• font-variant
• font-weight
• font-stretch
• font-size
• line-height
• font-family

<p id="font-example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

#font-example {
  /* <font-style> <font-variant> <font-weight> <font-stretch> <font-size>/<line-height> <font-family> */
  font: italic small-caps bold 16px/2 "Arial";
}

font-style

Selects a normal/italicized font from a font family.

Specify: normal, italic, oblique, or oblique <angle> (e.g. oblique 14deg).

According to the spec, “Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face” (CSS-Tricks).

font-variant

Controls the usage of alternate glyphs (e.g. ligatures, traditional/simplified Chinese characters). Shorthand for the following properties:

• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric

p {
  /* Examples */
  font-variant: normal;
  font-variant: small-caps slashed-zero;
  font-variant: common-ligatures tabular-nums;
}

font-weight

Sets the boldness of the font. Specify:

• any number between 1 and 1000 — E.g. 500
• normal — Alias of 400
• bold — Alias 700
• lighter — One relative weight lighter than the parent
• bolder — One relative weight bolder than the parent

font-stretch

Selects a normal, condensed, or expanded version of a font. Specify:

• normal
• a percentage — between 50% and 200%
• a "condensed" family — semi-condensed, condensed, extra-condensed, or ultra-condensed
• an "expanded" family — semi-expanded, expanded, extra-expanded, or ultra-expanded

font-size

Sets the size of the font. Specify:

• a length — E.g. 16pt or 16px
• a percentage — E.g. 75% (relative to its parent)
• an absolute-size keyword — xx-small, x-small, small, medium, large, x-large, xx-large, or xxx-large (based on the user's default font size; the final value is calculated by the browser)
• an relative-size keyword — larger, smaller (relative to its parent)

line-height

Sets the height of the line box (distance between the lines of the text). Specify:

• normal — depends on the browser
• a number — (e.g. 1.5) multiple of the element's font size
• a percentage — (e.g. 150%) relative to the element's font size
• a length — (e.g. 20px)

font-family

Sets a prioritized list of font family names (and/or generic family names) to use.

A font family name would be something like Arial or Times New Roman, whereas a generic family name is one of: serif, sans-serif, cursive, fantasy, or monospace.

font-kerning

Enables or disables kerning. Specify auto, normal, or none.

Font Settings Properties

font-feature-settings

Controls advanced typographic features in OpenType fonts.

p {
  font-feature-settings: 'smcp';
  font-feature-settings: 'smcp' on;
  font-feature-settings: 'swsh' 2;
  font-feature-settings: 'smcp', 'swsh' 2;
}

font-variation-settings

Sets low-level properties of a variable font.

p {
  font-variation-settings: 'wght' 850;
  font-variation-settings: 'wght' 850, 'slant' 0;
}

Font Variant Properties

font-variant-caps

Controls the use of alternate glyphs for capital letters.

Common values are normal and small-caps.

font-variant-east-asian

Controls the use of alternate glyphs for East Asian scripts (e.g. half-width or full-width, traditional or simplified). Specify:

• normal — Don't use alternate glyphs
• ruby — Use of special glyphs for rendering ruby characters (usually slightly bolder for increased contrast because ruby characters are usually rendered small)
• a variant value — jis78, jis83, jis90, jis04, simplified, or traditional. The resulting kanji might slightly be altered: e.g. 麹町 (normal) vs 麹町 (jis78); 大学 (normal) vs 大学 (traditional).
• a width value — proportional-width ("half-width") or full-width

font-variant-ligatures

Controls which ligatures are used. Common values are normal and none (ligature availability depends on the font). See here for other font-variant-ligatures values.

font-variant-numeric

Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. (Alternate glyphs availability depends on the font.)

Assets

• DWRITE_FONT_STYLE enumeration (dwrite.h) (Microsoft Docs) — Appeared in https://docs.microsoft.com/en-us/windows/win32/api/dwrite/ne-dwrite-dwrite_font_style — https://docs.microsoft.com/en-us/windows/win32/api/dwrite/images/fontstyle_for_palatino.png
• font-kerning (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning — https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning/font-kerning.png

References

• @font-face (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• font-display (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
• font (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font
• font-style (CSS-Tricks) — https://css-tricks.com/almanac/properties/f/font-style/
• font-style (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
• font-variant (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
• font-weight (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
• font-stretch (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch
• font-size (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
• line-height (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• font-family (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
• font-kerning (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning
• font-feature-settings (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
• font-variation-settings (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings
• font-variant-caps (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps
• font-variant-east-asian (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian
• font-variant-ligatures (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures
• font-variant-numeric (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric