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
font
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
line-height
At-rules
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
Specification |
---|
CSS Fonts Module Level 4 |