# Fix fonts that look different

> Troubleshoot a website font that looks wrong across devices. Compare viewport settings, loaded font files, weights, fallback fonts and text spacing.

Canonical page: https://sitepeel.dev/guides/fonts-look-different-in-browsers/

First check that both browsers are using the same font file, weight and layout conditions. A matching font-family declaration does not prove that the same font actually rendered.

## Compare the same page under the same conditions

Before changing typography, compare the same URL, content, browser zoom and viewport dimensions. A narrower content column can wrap a heading onto another line even when the font is identical. Browser toolbars can also change the available height, making two screenshots appear misaligned.

Identify the difference precisely. Is the letter shape wrong, the weight too heavy, the line spacing larger, or the whole section shifted? These symptoms point to different causes. Keep one representative heading and paragraph as your comparison target rather than judging the entire page from memory.

## Verify the font file and the rendered face

Use the browser’s network panel to check the font request, and inspect the font actually used for the text. A font-family list can name the intended face while the browser displays a fallback. A missing path, failed request or unavailable local font can therefore produce a very different result without changing the declaration.

For web fonts, check the @font-face family name, source and descriptors against the styles that use them. Do not assume a font installed on your computer exists on a visitor’s device. Sitepeel’s font inspection can help you compare the page’s typography, while the browser’s font and network panels help confirm loading details.

## Check weights, styles and the fallback state

Verify the requested weight and style, not only the family. A project can load its regular face correctly while a heading’s heavier weight is missing or mapped incorrectly. If you use a variable font, compare the declared range and the values requested by the component. Also check letter spacing and line height before replacing the typeface.

The example below shows separate regular and semibold files. Replace both URLs and the family with files your project is authorized to serve. Confirm that the files really correspond to the declared weights; renaming a regular file does not make it a semibold face.

Example: font-loading.css

```
@font-face {
  font-family: "Project Sans";
  src: url("/fonts/project-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Project Sans";
  src: url("/fonts/project-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body { font-family: "Project Sans", sans-serif; }
h1, h2 { font-weight: 600; }
```

## Separate font loading from layout and rendering differences

Compare after the page’s font loading and layout have settled. The CSS Font Loading API can help with automated capture timing, but waiting does not turn a failed font request into a successful one. Inspect request results and the rendered face when the wrong font persists.

If both browsers use the same face, compare the computed font size, line height, letter spacing and surrounding margins. User preferences and platform rendering can still affect the appearance of text. Aim for consistent hierarchy, wrapping and readability; do not compensate for every rasterization difference with browser-specific offsets.

## Test the fix with real content and a slow load

Use the real headline, long navigation labels and a paragraph containing the characters your audience needs. A fallback can reveal missing character coverage, and a longer label can expose a layout that only worked with sample text. Check at least one narrow screen and another browser after the fix.

Reload with a slow connection to review the transition from fallback to the intended font. Check that the page remains usable and that key actions stay visible. Record the approved family, weights and text styles in your design reference so future pages do not reintroduce a different font configuration.

## Further reading

- [Reddit: different font appearance across browsers](https://www.reddit.com/r/webdev/comments/13jvcdk/why_is_the_font_rendered_differently_on_firefox/)
- [Reddit: different typography and whitespace across devices](https://www.reddit.com/r/Wordpress/comments/1q88i0m/fonts_look_different_on_different_devices/)
- [MDN: @font-face and font descriptors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face)
- [MDN: CSS Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API)

## Related pages

- [Website font finder](https://sitepeel.dev/font-finder/index.md): Hover over website text to inspect its font family, size, weight and line height. Find the typography behind a design with Sitepeel.
- [Identify website typography](https://sitepeel.dev/guides/identify-fonts-on-website/index.md): Find a website’s font family, weight, size and line height. Learn what to record and how to check typography in your own layout.
- [Fix copied CSS that looks wrong](https://sitepeel.dev/guides/copied-css-not-working/index.md): Fix copied HTML and CSS that renders differently. Check stylesheet loading, inherited values, custom properties, parent layout and pseudo-elements.