Home » Guides » Optimization » Wordpress Font Metric Overrides
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
2 min read

Calculating Font Metric Overrides with DevTools

To prevent Cumulative Layout Shift (CLS) when using font-display: swap, you need to make your fallback font (e.g., Arial) take up the exact same space as your custom web font.

You can calculate the perfect ascent-override, descent-override, and size-adjust values directly in your browser.

1. The Goal

You want to tweak the fallback font so that when you toggle between the Web Font and the Fallback Font, the text doesn't move.

2. Chrome DevTools Method

Chrome allows you to edit @font-face rules live in the Styles pane.

Step 1: Prepare the CSS

In your site's CSS (or via the Inspector Stylesheet), ensure you have a separate @font-face rule for your fallback.

@font-face {
    font-family: "MyFallback";
    src: local("Arial");
    ascent-override: 100%;
    descent-override: 20%;
    size-adjust: 100%;
}

Step 2: Inspect the Text

  1. Right-click a paragraph of text and select Inspect.
  2. In the Styles pane, find the font-family rule.
  3. Change it to font-family: "MyFallback", sans-serif;. Now you are seeing the un-tuned fallback.

Step 3: Edit the @font-face

  1. In the Styles pane, click the link to your CSS file (e.g., style.css:100) to open the source.
  2. Or, if you added the rule via the Inspector, find the @font-face block in the Styles pane.
  3. Start tweaking the values:
    • size-adjust: Change this first to match the width of the text.
    • ascent-override: Adjust this to stop the text from jumping up/down (line-height).
    • descent-override: Fine-tune the bottom spacing.

Step 4: The "Flash" Test

To verify, toggle the checkbox next to font-family in the Styles pane to switch between your live Web Font and your Fallback. If the text stays perfectly still, you are done.

3. Firefox DevTools Method

Firefox has a dedicated Fonts panel that is very useful for debugging.

  1. Inspect the element.
  2. In the Inspector pane (right side), look for the Fonts tab (it might be collapsed next to Layout/Computed/Changes).
  3. This panel shows exactly which font is being rendered.
  4. To edit the overrides, go to the Style Editor tab (top of the DevTools).
  5. Find your CSS file in the left sidebar.
  6. Edit the @font-face rule directly. Firefox updates the page immediately.

4. Tools to Make It Easier

While DevTools is great for verification, getting the initial numbers can be hard by just guessing.

  • Font Style Matcher (Online Tool): A website where you upload your font and it overlays it on top of Arial/Georgia, giving you sliders to find the perfect values.
  • Perfect-ish: A tool that automates the calculation based on the font metadata.
Created: March 17, 2026 • Last Modified: February 27, 2026