CSS Fonts Module Level 4

https://www.w3.org/TR/css-fonts-4/
Admin
CSS Fonts Module Level 4 defines font-related properties and controls in CSS, including font...
Tokens:67,646
Snippets:470
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### font-size clamp() example

Source: https://www.w3.org/TR/css-fonts-4

Shows that font-size can be clamped for responsive typography using the clamp() function.

```css
font-size: clamp(10px, ..., 36px);
```

--------------------------------

### font shorthand property examples

Source: https://www.w3.org/TR/css-fonts-4

Shows valid examples of the font shorthand property, setting font-style, font-variant, font-weight, font-width, font-size, line-height, and font-family in one declaration. The last two examples include the newer font-width and font-size-adjust values (condensed, oblique, 25deg, 753) that are part of the extended syntax.

```css
p { font: 12pt/14pt sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "new century schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
p { font: condensed oblique 12pt "Helvetica Neue", serif; }
p { font: condensed oblique 25deg 753 12pt "Helvetica Neue", serif; }
```

--------------------------------

### font-size example style sheet

Source: https://www.w3.org/TR/css-fonts-4

Demonstrates various ways of specifying the font-size property, including absolute lengths, relative keywords, percentages, and font-relative lengths.

```css
p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
```

--------------------------------

### Using generic(fangsong) as fallback

Source: https://www.w3.org/TR/css-fonts-4

Example of using a script-specific generic font family as a fallback after a named font.

```css
body { font-family: "Adobe Fangsong Std R", generic(fangsong), serif}
```

--------------------------------

### Simple Latin text with DroidSans font

Source: https://www.w3.org/TR/css-fonts-4

Shows a simple Latin text example that triggers download of only the Latin font (DroidSans.woff) because all characters fall within its unicode-range U+0-5FF.

```html
body { font-family: DroidSans; }

<p>This is that</p>
```

--------------------------------

### Using small capitals in blockquote first-line

Source: https://www.w3.org/TR/css-fonts-4

CSS example showing how to apply small-caps to the first line of a blockquote while the rest is italicized. The HTML blockquote is included to illustrate the markup.

```css
blockquote            { font-style: italic; }
    blockquote:first-line { font-variant: small-caps; }

    <blockquote>I'll be honor-bound to slap them like a haddock.</blockquote>
```

--------------------------------

### Mix palettes with palette-mix()

Source: https://www.w3.org/TR/css-fonts-4

Mix multiple palettes using the palette-mix() function. The percentages are normalized (--soft gets 35%) and the color interpolation method defaults to oklab. The result is a new palette interpolated per color index.

```css
font-palette: palette-mix(dark 20%, --warm 45%, --soft);
```

--------------------------------

### ascent-override percentage resolution example

Source: https://www.w3.org/TR/css-fonts-4

Shows how the ascent-override descriptor is resolved against different font sizes. The outer span uses an ascent value of 10px, while the inner span uses 15px.

```css
@font-face {
  font-family: overridden-font;
  ascent-override: 50%;
  ...
}

<span style="font-family: overridden-font; font-size: 20px;">
  Outer span content
  <span style="font-size: 150%;">Inner span content</span>
</span>
```

--------------------------------

### Loading a font instance from a collection with fallback

Source: https://www.w3.org/TR/css-fonts-4

Loads an individual instance in a collection using the #Regular fragment, with a fallback to downloading an individual font if collections are not supported.

```css
@font-face {
  font-family: 源ノ角ゴシック Code JP;
  src: url(SourceHanCodeJP.otc#Regular) format("collection"),
    url(SourceHanCodeJP-Regular.ttf) format("opentype");
}
```

--------------------------------

### Invalid local() with CSS-wide keyword

Source: https://www.w3.org/TR/css-fonts-4

Example of an error: CSS-wide keywords such as inherit are not allowed inside local().

```css
@font-face {
  font-family: foo;
  src: local(inherit);
}
```

--------------------------------

### Selecting items in the src with format fallbacks

Source: https://www.w3.org/TR/css-fonts-4

Shows how the src descriptor lists multiple font sources with format hints. If woff2 is not supported, the unsupported fictitious "zebra" format is skipped and the opentype font is downloaded.

```css
src: url(ideal.woff2) format("woff2"),
    url(unsupported.zeb) format("zebra"),
    url(basic.ttf) format("opentype");
```

--------------------------------

### Using font shorthand with system fonts

Source: https://www.w3.org/TR/css-fonts-4

Shows how to use the font shorthand to set a font for a button, then use the system font 'menu' for a paragraph inside the button, and override the font-weight for emphasized text.

```css
button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

```

--------------------------------

### Turkish lang attribute example

Source: https://www.w3.org/TR/css-fonts-4

Shows a Turkish document where the lang attribute is used to infer the OpenType language system, so no font-language-override is needed.

```html
<body lang="tr">
    <h4>Madde 9</h4>
    <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>

```

--------------------------------

### Valid quoted font family names

Source: https://www.w3.org/TR/css-fonts-4

Examples of valid font family names that are quoted to avoid confusion with generic or CSS-wide keywords.

```css
font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;
```

--------------------------------

### Invalid font-family declarations

Source: https://www.w3.org/TR/css-fonts-4

Examples of invalid font-family declarations that use unquoted names with punctuation, digits, or special characters, which must be escaped or quoted.

```css
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
```

--------------------------------

### Oldstyle numerals and diagonal fractions for recipe amounts

Source: https://www.w3.org/TR/css-fonts-4

Uses oldstyle numerals and diagonal fractions for amounts in a recipe list. The fraction feature is applied only to the values, not the entire paragraph, and relies on contextual rules based on the slash character.

```css
.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }

    <h4>Steak marinade:</h4>
    <ul>
      <li><span class="amount">2</span> tbsp olive oil</li>
      <li><span class="amount">1</span> tbsp lemon juice</li>
      <li><span class="amount">1</span> tbsp soy sauce</li>
      <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
      <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
      <li>Salt &amp; pepper</li>
    </ul>

    <p>Mix the meat with the marinade
    and let it sit covered in the refrigerator
    for a few hours or overnight.</p>
```

--------------------------------

### Quoting font families prevents escaping mistakes

Source: https://www.w3.org/TR/css-fonts-4

Examples showing recommended quoting of font family names that contain spaces, digits, or punctuation to avoid escaping mistakes.

```css
body { font-family: "New Century Schoolbook", serif }

<body style="font-family: '21st Century', fantasy">
```

--------------------------------

### Equivalent @font-feature-values definitions for the same family

Source: https://www.w3.org/TR/css-fonts-4

Shows four equivalent ways to define the same set of font feature values for the family 'foo'. Repeated declaration names, multiple blocks of the same type, and multiple rules for the same family all cascade together; the last-defined value for a given tuple wins.

```css
/* Default */
@font-feature-values foo {
  @swash { pretty: 1; cool: 2; }
}

/* Repeated declaration names */
@font-feature-values foo {
  @swash { pretty: 0; pretty: 1; cool: 2; }
}

/* Multiple blocks of the same type */
@font-feature-values foo {
  @swash { pretty: 1; }
  @swash { cool: 2; }
}

/* Multiple rules for the same family */
@font-feature-values foo {
  @swash { pretty: 1; }
}
@font-feature-values foo {
  @swash { cool: 2; }
}
```

--------------------------------

### Superscript variant positioning with font-variant-position

Source: https://www.w3.org/TR/css-fonts-4

CSS rule to apply superscript variant positioning to sup elements, with an example HTML markup showing how to use it. The variant property is applied only to the sub-element containing the superscript.

```css
sup { font-variant-position: super; }
x<sup>2</sup>
```

--------------------------------

### Syntax of <generic-font-family>

Source: https://www.w3.org/TR/css-fonts-4

The formal grammar for the <generic-font-family> value type, including script-specific, complete, and incomplete generic families.

```css
<generic-font-family> = <generic-font-script-specific>| <generic-font-complete> | <generic-font-incomplete>
<generic-font-script-specific> = generic(fangsong) | generic(kai) | generic(khmer-mul) |  generic(nastaliq)
<generic-font-complete> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace
<generic-font-incomplete> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded
```

--------------------------------

### font-feature-settings: "hwid" for half-width kana

Source: https://www.w3.org/TR/css-fonts-4

Applies the OpenType 'hwid' feature to a body element to render Japanese text with half-width kana characters. The example includes the CSS rule and the HTML paragraph it affects.

```html
body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }

<p>毎日カレー食べてるのに、飽きない</p>
```

--------------------------------

### Ordinal variant with font-variant-numeric

Source: https://www.w3.org/TR/css-fonts-4

Applies the ordinal variant to a span so only the suffix (e.g., "th") is rendered in ordinal form while digits remain unchanged. The example shows the CSS rule and the HTML element it targets.

```css
.ordinal { font-variant-numeric: ordinal; }
<span class="ordinal">17th</span>
```

--------------------------------

### Check computed font-family for system-ui

Source: https://www.w3.org/TR/css-fonts-4

Shows that the computed style for system-ui should remain "system-ui" on every platform, regardless of how the UA expands it to a collection of system user interface fonts.

```html
<div id="system-text" style="font-family: system-ui"></div>
...
window.getComputedStyle(document.getElementById("system-text")).getPropertyValue("font-family");
```

--------------------------------

### @font-face rule syntax

Source: https://www.w3.org/TR/css-fonts-4

Shows the general syntax of the @font-face rule, which links to fonts that are automatically fetched and activated when needed. The rule accepts the font descriptors defined in the specification, and descriptors not given explicit values take their initial values.

```css
@font-face {
  <declaration-list>
}

```

--------------------------------

### Determining aspect value with spans

Source: https://www.w3.org/TR/css-fonts-4

CSS and HTML example for determining the aspect value of a font by comparing two spans with the same font-size but different font-size-adjust properties. The right span has font-size-adjust set to 0.5, and the borders around the letters should align when the value is accurate.

```css
p {
  font-family: Futura;
  font-size: 500px;
}

span {
  border: solid 1px red;
}

.adjust {
  font-size-adjust: 0.5;
}

<p><span>b</span><span class="adjust">b</span></p>
```

--------------------------------

### Local font fallback with local()

Source: https://www.w3.org/TR/css-fonts-4

Uses local() to prefer a locally available copy of a font and downloads it if not present. The local() argument is a format-specific string that uniquely identifies a single font face.

```css
/* regular face of Gentium */
@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /* prefer locally available Gentium */
    url(Gentium.woff);  /* otherwise, download it */
}
```

--------------------------------

### Set emoji presentation with font-variant-emoji

Source: https://www.w3.org/TR/css-fonts-4

Defines a custom font and applies the emoji presentation style to a specific element using the font-variant-emoji property. The example uses the emoji value to render the couch and lamp character (U+1F6CB) in emoji style, assuming the font supports that presentation.

```css
@font-face {
  font-family: "Custom Emoji";
  src: url("CustomEmoji.ttf") format("truetype");
}
...
<div style="font-family: 'Custom Emoji'; font-variant-emoji: emoji;">&#x1F6CB;</div>
```
Tokens:
Raw