What the FOUT! 🤌

A CSS playground for size-adjust and F-mods (font metric overrides). It will help you find the right fallback for your font and tweak it in order to get the best possible results.

Web Font

Font Family:

Font Size (px):

Line Height (em):

Font Weight:

Letter Spacing (px):

Word Spacing (px):

Fallback font

Font family:

Size Adjust (%):

Ascent Override (%):

Use 0 to disable it

Descent Override (%):

Use 0 to disable it

Line Gap override (%):

Use 0 to disable it

Show with different color

This is only affecting the preview

Preview

Click on the text to edit

Preview crossfader™

A CSS Playground for size-adjust and Font mods

Your CSS snippets

Click on the code to copy it to your clipboard

FONT FACE DECLARATION

@font-face {
  font-family: "fallback for Lato";
  src: local(Arial);
  size-adjust: 98%;
  descent-override: 10%;
}

CUSTOM CSS

body {
  font-family: "Lato", "fallback for Lato";
  font-size: 25px;
  line-height: 1.4em;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: 0;
}

Source Code