Properties Overview
The listed font properties are adjoined with related at-rules and other typography properties.
The listed font properties are adjoined with related at-rules and other typography properties.
line-breakline-gap-override@font-face
blocks. Overrides the default line gap.
line-height (or leading)1lh and 1rlh.
line-height-stepline-clamp / -webkit-line-clampfontfont-size
and font-family
font-style,
font-variant,
font-weight,
font-stretch,
and also the line-height
specially separated by a forward-slash from the
required font-size
Paragraph in shorthand font.
Used to specify one of the system fonts keywords, recycling the font which the system uses to render the matching interface element.
Paragraph in system-keyword font.
font-family
Fallbacks which will always render may be
one of:
sans-serif,
serif,
cursive,
monospace.
courier,
fantasy,
font-feature-settingsThe font-feature-settings CSS property controls advanced typographic features in OpenType fonts. Usually, some font-variant exposes semantically the feature, avoid usage.
font-kerningfont-language-override
Overrides the html element's lang,
that browsers otherwise use to infer language-specific font settings.
For example, preventing a block with Turkish from using the f-i ligature.
Turkish has a dotted and dotless 'i', making this ligature incorrect.
font-optical-sizingEnabled by default, renders smaller stroke/serifs thicker.
font-palette
and @font-palette-values
For use with color fonts that contain palettes.
It allows specifying which palette to use.
New palettes can be created with
@font-palette-values.
font-display
font-display is only allowed in
@font-face blocks.
The font loading periods / states allocated time change according to
the provided table.
| Declaration | Block Period | Swap Period |
|---|---|---|
| font-display: block | short | infinite |
| font-display: swap | shortest | infinite |
| font-display: fallback | shortest | short |
| font-display: optional | shortest | none |
The Font Periods occur as shown in the diagram, while the font asset is requested and until either the failure, or successful loading.
The state descriptions are given in the following table.
| Font Rendered | Transition | |
|---|---|---|
| Block Period | Invisible | Swap |
| Swap Period | Fallback | Loaded, or Failure |
| Failure Period | Fallback | (final) |
@font-face
The font-family gives an identifier for the font,
which is then usable outside the scope of the at-rule in
normal font
or font-family declarations.
The font asset is targeted by src: url(...),
or using local(...) using the full Postscript/localized name.
May specify font-specific properties, such as
font-weight,
font-style,
font-stretch.
Example paragraph with an alternative font-face.
This paragraph is shown in Garamond,
named for sixteenth-century
Parisian engraver Claude Garamond.
Using custom fonts risk rendering text in a fall-back or invisible font, for a brief moment, until swapped to the loaded font. This is known as FOUT or FOIT. There are several mitigations measures.
@font-face
declaration
span
placed outside of the viewport
link with
rel='preload'as='font'
font-display: swap,
or font-display: block
(see font-display).
font-size1em and
1rem.
Defining it proportional 1em at the root
will re-use the user's preferred font size.
Defining it proportional vw
will keep it constant against scaling / zooming.
To scale the font size with the viewport,
making it invariant of the "zoom",
as well as keeping line-height in proportion:
.container {
font-size: 1.5vw;
line-height: 2vw;
}
font-size-adjustfont-variantIncludes 9 properties, with one shorthand being a whitespace-separated concatenation of 8 suffixed.
font-stretch,
letter-spacing and
word-spacing.
Those properties affect the final width of type,
in additional to the underlying size.
They can be tweaked to achieve a desired width.
The font-stretch,
alias for font-width,
needs font-level support. Typically specified as a percentage.
Neither letter-spacing nor
word-spacing need font-level support.
They are specified as an absolute distance, typically in pixels.
This sample text can change width,
by stretch via font-stretch,
and spacing via letter-spacing
and word-spacing.
font-styleMostly used to select italic, oblique. Those styles are equivalent in 99% of fonts. Italic text / Oblique text.
font-synthesis