Hey there! Sorry to hear you're stuck with this frustrating @font-face issue—nothing's more annoying than a font working perfectly in one browser but glitching in others. Even if you’ve dug through tons of similar solutions, let’s cover some common pitfalls that might be slipping under your radar:

• Confirm your font file declarations match weights/styles exactly
  Browsers like Chrome and Firefox will fall back to faux bold (auto-thickening the regular font) if they can’t find the specific weight you’re calling for. Make sure your @font-face rules explicitly map each font file to its correct weight and style. For example:

  @font-face {
    font-family: 'CustomFont';
    src: url('customfont-regular.woff2') format('woff2');
    font-weight: 400; /* Regular weight */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CustomFont';
    src: url('customfont-bold.woff2') format('woff2');
    font-weight: 700; /* Bold weight */
    font-style: normal;
  }
  

  If you’re using font-weight: bold (which maps to 700) but haven’t declared a bold font file, browsers will fake it instead of using the actual bold variant.

• Rule out browser-specific rendering quirks
  Sometimes default font smoothing or ligature settings can make text appear bolder than intended. Try adding these properties to your text elements to override browser defaults:

  .your-target-element {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: none;
  }
  

  Note: font-smooth is non-standard, so stick to the prefixed versions for better compatibility.

• Check for conflicting CSS rules
  Pop open your browser’s dev tools (F12) and inspect the problematic text element. Look for inherited font-weight properties from parent elements, or generic selectors (like body or p) that might be overriding your custom font’s weight. Even a subtle font-weight: 500 somewhere could throw off rendering.

• Validate your font files
  It’s possible your font files have encoding issues that Safari ignores but Chrome/Firefox flag. Try re-generating the webfont files using a tool that optimizes for cross-browser compatibility (make sure to preserve all weights/styles without subsetting unless necessary).

If none of these fixes work, sharing a link to your site or a minimal code example would be a huge help—we can dive into your actual setup to spot the issue.

内容的提问来源于stack exchange，提问作者jamiechalski