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

Fallback font

Use 0 to disable it

Use 0 to disable it

Use 0 to disable it

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.
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

CUSTOM CSS

Made by Antonio Cosentino © 2023 ·
Built with Next.js & Tailwind CSS ·
Github Source Code