Start a project

Tool 124 of 244 · Fonts

Font Fallback Metrics Calculator

Computes size-adjust and ascent, descent and line-gap overrides so fallback fonts match your web font and reduce layout shift.

Font Fallback Metrics Calculator

The fonts

Metrics are measured in this browser with canvas, so they reflect the fonts installed here. For a webfont, type its family name after it has loaded on this page, or paste known metric values.

Metrics and CSS

MetricWeb fontFallbackAdjust
Fallback CSS (size-adjust, ascent, descent, line-gap)

01

What it does

Computes size-adjust and ascent, descent and line-gap overrides so fallback fonts match your web font and reduce layout shift.

  • Parses OS/2 and hhea metrics and average character width (xAvgCharWidth or measured from cmap/hmtx over a weighted Latin sample) from the…
  • Shares the OpenType parser with font-subset-estimator

02

Private by design

Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.

03

What you get

size-adjust and metric override CSS, with a Copy and a Download button on every result.

  • Fonts
  • size-adjust
  • CLS

Why it matters

Computes size-adjust and ascent, descent and line-gap overrides so fallback fonts match your web font and reduce layout shift.

Parses OS/2 and hhea metrics and average character width (xAvgCharWidth or measured from cmap/hmtx over a weighted Latin sample) from the uploaded font; bundled metrics for common system fallbacks; outputs @font-face fallback blocks; overlay preview of text reflow. Shares the OpenType parser with font-subset-estimator. Everything runs in your browser; nothing you paste is sent unless you press Fetch.

How to use it

  1. Paste or type the input the tool asks for.
  2. Read the summary and the table or preview.
  3. Adjust the options if you need a different result.
  4. Copy or download the output. Nothing leaves this page.

FAQ

Is my input uploaded?

No. The work runs in your browser and nothing you type, paste or upload is sent anywhere.

Will this change my site for me?

No. It shows results and, where it writes rules or files, you copy them and apply them yourself.

Can I rely on this as official guidance?

It follows public documentation and well-known algorithms, and tells you where it is a subset or a simulation. Confirm critical changes in the official tool or a staging environment.

Work with me

Want a site that gets these right?

I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.

All developer tools · Back to leej.uk