Fonts

font

Sets the main font properties in one declaration. The size and family are required and come last, in that order; style, small caps, weight and width may come first in any order, and a line height may follow the size after a slash.

<font-variant-css2> is just normal or small-caps, and <font-width-css3> is one of the width keywords such as condensed. <system-font-family-name> is one of caption, icon, menu, message-box, small-caption or status-bar, which copy the font the operating system uses for that part of its interface.

Any longhand you leave out is reset to its initial value, so font also clears an inherited line-height. It resets font-size-adjust, font-kerning and the font-variant longhands too, even though it cannot set them.

font: italic 600 1.125rem / 1.5 system-ui, sans-serif;

font-family

A comma-separated list of fonts to try in order. For each character the browser uses the first font in the list that has a glyph for it, so the list should end with a generic family.

A <font-family-name> is a quoted string or a sequence of identifiers; quote any name that contains spaces or punctuation. Generic families include serif, sans-serif, monospace, cursive, system-ui, math and emoji. Generic names must not be quoted, or they are treated as a font called, for example, "serif".

font-family: "Source Serif 4", Georgia, serif;

font-size

The size of the font, which also sets the value of the em unit for the element. Keywords from xx-small to xxx-large pick from a browser scale based on medium; larger and smaller step relative to the parent.

em and percentages are relative to the parent's font size, so they compound when nested; rem is relative to the root element and does not. math scales the size by the nesting level given in math-depth, for MathML.

font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

font-weight

How heavy the strokes of the font are, as a number from 1 to 1000. normal is 400 and bold is 700; bolder and lighter step relative to the inherited weight.

<font-weight-absolute> is normal, bold or a number in the range 1 to 1000. A variable font can draw any weight in its range; a static family uses the nearest face it has, and the browser may synthesise bold if there is none (see font-synthesis).

font-style

Chooses an italic or oblique face. oblique takes an optional slant angle, which a variable font with a slant axis can match exactly.

If the family has no italic, the browser falls back to an oblique face, and then to slanting the upright face itself unless font-synthesis-style forbids it.

font-width

Chooses a narrower or wider face of the family, as a keyword or a percentage of the normal width.

font-width is the new name for font-stretch, which remains a legacy alias and is supported in every browser (Chrome 60, Firefox 9, Safari 11). Until Chrome accepts the new name, font-stretch is the one to use. The keywords run from ultra-condensed (50%) to ultra-expanded (200%). It only has an effect if the family has width variants or a width axis; browsers never stretch glyphs artificially.

font-size-adjust

Keeps a chosen font metric the same size across fonts, so a fallback font with a smaller x-height does not look smaller than the font it replaces.

The number is the wanted ratio of the metric to the font size; the metric defaults to ex-height. from-font takes the ratio from the first font in the list, so every fallback is scaled to match it.

font-size-adjust: from-font;

font-variant

Shorthand for the seven font-variant-* longhands below, which switch on the alternative glyphs a font provides: small capitals, figure styles, ligatures, East Asian forms, stylistic alternates, sub and superscripts and emoji presentation.

normal resets every longhand; none does the same but also turns off the font's standard ligatures. The early versions listed for support cover only small-caps; the other values arrived with each longhand.

font-variant-caps

Uses the font's small capital, petite capital or titling capital glyphs. If the font has no small capitals, the browser makes them by shrinking capital letters.

small-caps replaces lowercase letters only; all-small-caps replaces capitals as well, which suits acronyms set in running text.

font-variant-numeric

Chooses the style of digits and fractions: lining or old-style figures, proportional or fixed-width (tabular) spacing, diagonal or stacked fractions, ordinal suffixes and a slashed zero.

The groups are lining-nums or oldstyle-nums, proportional-nums or tabular-nums, and diagonal-fractions or stacked-fractions. Each only works if the font includes those glyphs.

td.amount { font-variant-numeric: tabular-nums; }

font-variant-ligatures

Turns groups of ligatures and contextual alternates on or off. Common ligatures such as "fi" and contextual alternates are on by default; discretionary and historical ligatures are off.

Each group has an on and off keyword: common-ligatures / no-common-ligatures, discretionary-ligatures / no-discretionary-ligatures, historical-ligatures / no-historical-ligatures and contextual / no-contextual. none turns them all off, which is common for code.

font-variant-east-asian

Chooses East Asian glyph forms: the character standard to follow (jis78, jis83, jis90, jis04, simplified, traditional), full-width or proportional width, and the smaller forms designed for ruby.

The width values are full-width and proportional-width.

font-variant-alternates

Switches on a font's stylistic alternates, style sets, character variants, swashes, ornaments and annotation forms. Apart from historical-forms, each function takes a name that you map to the font's own index in an @font-feature-values rule.

@font-feature-values Fraunces { @styleset { rounded: 2; } }
h1 { font-variant-alternates: styleset(rounded); }

font-variant-position

Uses the font's purpose-drawn subscript or superscript glyphs. Unlike vertical-align: sub, it does not change the line height or shift the baseline.

font-variant-emoji

Chooses between the colourful emoji presentation and the plain text presentation for characters that have both, such as ☺ or ♥.

unicode follows each character's default presentation in Unicode; normal leaves the choice to the browser. A variation selector in the text itself always wins.

font-feature-settings

Turns OpenType features on or off directly by their four-letter tags. Use it for features that have no font-variant-* keyword; where one exists, the keyword is easier to read and combines better.

Each <feature-tag-value> is a quoted tag followed by on, off or a number (1 if omitted). The whole list replaces any inherited one, so a child that sets one feature loses the features its parent set.

font-feature-settings: "ss01", "cv05" 1, "kern" off;

font-variation-settings

Sets the axes of a variable font directly by their four-letter tags. Prefer font-weight, font-width, font-style and font-optical-sizing for the standard axes, and use this for a font's custom axes.

Registered axes have lowercase tags ("wght", "wdth", "slnt", "ital", "opsz"); custom axes are uppercase, such as "GRAD". Like font-feature-settings, the list replaces any inherited one.

font-variation-settings: "GRAD" 150;

font-optical-sizing

Whether the browser sets a variable font's optical size axis to match the font size, giving small text sturdier shapes and large text finer detail. none turns this off.

font-kerning

Whether the font's kerning data is used to adjust the spacing between particular pairs of letters. auto lets the browser decide, normal forces kerning on and none turns it off.

font-language-override

Tells the font which language's glyph forms to use, as an OpenType language system tag such as "TRK", instead of deriving it from the element's lang.

Setting the correct lang attribute is usually the better fix; this property is for content whose language is marked up wrongly or not at all.

font-palette

Chooses which of a colour font's palettes to draw with. light and dark pick the palettes the font marks as suited to light or dark backgrounds; a dashed name refers to a palette defined or overridden with @font-palette-values.

<palette-identifier> is a <dashed-ident> such as --brand. palette-mix() blends two palettes, which is how a change of palette is animated.

font-synthesis

Shorthand that lists which faces the browser may fake when the family lacks them: bold (weight), italic or oblique (style), small capitals (small-caps) and sub and superscript glyphs (position). Anything left out of the list is not synthesised; none forbids all four.

Turning synthesis off is useful for scripts such as Chinese or Japanese, where faked bold or slanted glyphs are hard to read.

:lang(ja) { font-synthesis: none; }

font-synthesis-style

Whether the browser may slant the upright face when the family has no italic or oblique face. none keeps the text upright instead.

font-synthesis-weight, font-synthesis-small-caps, font-synthesis-position

Whether the browser may fake a bold face, small capitals, or sub and superscript glyphs respectively, when the family does not provide them. auto allows it and none forbids it.