ClientSideTools Privacy-First Browser Tools

Font `size-adjust` & `ascent-override` Calibrator

Calculate font metric overrides to reduce layout shift when web fonts replace fallback fonts.

SVG & CSS Engineering Local processing Font data is processed locally.

Calibrator

Font source

TTF and OTF metrics can be parsed directly. WOFF and WOFF2 can still be measured if the browser can load them, but vertical metrics may need manual entry.

Web font metrics

Fallback font metrics

Results

Upload a font or enter metrics, then calculate overrides.

Calculated values

    Introduction

    When a web font replaces a fallback font, differences in glyph width and vertical metrics can cause visible layout shift. CSS font descriptors such as size-adjust, ascent-override, descent-override, and line-gap-override can reduce that shift.

    This calculator estimates those values from font metrics and rendered width measurements.

    How it works

    The tool can parse basic vertical metrics from TTF/OTF files and measure rendered advance width when the browser can load the uploaded font. It then compares the web font against the fallback stack.

    • Width measurement uses canvas at 100px font size.
    • Vertical overrides are estimated from fallback metric ratios.
    • WOFF and WOFF2 binary parsing is not performed.
    • All processing happens locally.

    How to use

    1. Optionally upload a font file.
    2. Enter the web font family and font URL.
    3. Provide fallback font metrics if available.
    4. Calculate the overrides.
    5. Copy the generated @font-face CSS.
    6. Test the result on your live page.

    Practical example

    If your fallback font is slightly wider than the web font, increasing size-adjust on the web font can make the final rendered text occupy a similar width, reducing horizontal reflow when the font swaps.

    Use cases

    • Improving Core Web Vitals CLS scores.
    • Matching custom fonts to system fallbacks.
    • Preparing font CSS for design systems.
    • Debugging font-swap movement.
    • Documenting font metric adjustments.

    Best practices

    • Use font-display: optional for non-essential decorative fonts.
    • Preload critical fonts.
    • Test with throttled networks.
    • Verify results on multiple operating systems.
    • Keep fallback stacks realistic.

    Common mistakes

    • Assuming one override works for every fallback font.
    • Using metrics from the wrong font variant.
    • Ignoring descent and line gap.
    • Applying overrides without testing layout shift.
    • Relying only on local development rendering.

    Limitations

    • WOFF and WOFF2 metrics are not parsed directly.
    • Fallback font metrics may vary by operating system.
    • Canvas width measurement is an approximation.
    • Generated values are heuristic and should be validated.

    Browser compatibility

    The font descriptors used by this tool are supported in current versions of major browsers. Rendering behavior may still vary by platform.

    FAQ

    Is my font uploaded?

    No. Font files are processed locally in your browser.

    Can it parse WOFF2?

    It can try to load WOFF2 for width measurement if the browser supports it, but it does not parse WOFF2 binary metrics. Enter metrics manually if needed.

    Will this eliminate CLS completely?

    It can reduce font-related shift, but other layout elements may still move. Test with real user monitoring and lab tools.

    Should I use `swap` or `optional`?

    Use swap when the font is important but should not block text. Use optional when avoiding layout shift is more important than showing the custom font.

    References

    Version and changelog

    • Version: 1.0.0
    • Last updated: August 8, 2026
    • Changelog: Initial production release.