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. If you want to know more about the problem and the proposed solution, check out this article.

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™

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia hendrerit est, ut vulputate ipsum. Maecenas vel mollis ante. Mauris porta neque non blandit ultrices.

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