---
tags:
  - wordpress
  - fonts
  - css
  - devtools
  - cls
title: Calculating Font Metric Overrides with DevTools
---

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

```css
@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.

## Related Guides
*   [[wordpress-font-display|Mastering font-display for CLS]]
*   [[wordpress-local-fonts|Hosting Google Fonts Locally]]