CSS @font-face 无法正常工作问题（第二个问题）

Hey there! Let's dig into this font problem you're facing—nothing's more annoying than fonts working in one spot but breaking everywhere else. Based on your description (desktop Chrome works, Firefox/IE don't, mobile Chrome fails too), here are the most likely fixes to try:

1. Fix Your @font-face Declaration (Critical for Cross-Browser Support) #

Different browsers require different font formats, so your CSS might be missing key formats that Firefox, IE, and mobile devices need. Here's a bulletproof @font-face template to use:

@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font-file.eot'); /* IE9+ */
  src: url('your-font-file.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
       url('your-font-file.woff2') format('woff2'), /* Modern browsers (including mobile Chrome) */
       url('your-font-file.woff') format('woff'), /* Firefox, older Chrome */
       url('your-font-file.ttf') format('truetype'), /* Safari, iOS, Android */
       url('your-font-file.svg#YourCustomFont') format('svg'); /* Legacy iOS */
  font-weight: normal; /* Match your font's actual weight */
  font-style: normal; /* Match your font's actual style */
}

Make sure you have all these font files on hand—if you only have one format, you can generate the rest using a webfont conversion tool.

2. Fix Cross-Origin Resource Sharing (CORS) Issues #

Firefox and mobile Chrome are stricter about loading fonts from different domains than desktop Chrome. If your font files are hosted on a separate domain or subdomain, your server needs to send a CORS header to allow access:

• For Apache: Add this to your .htaccess file:

  Header set Access-Control-Allow-Origin "*"
  

• For Nginx: Add this to your server block:

  add_header Access-Control-Allow-Origin *;
  

This tells browsers it's safe to load the font files from your server.

3. Check File Paths & Mobile-Specific Quirks #

Mobile browsers sometimes struggle with relative paths that work on desktop. Try using absolute paths (e.g., /fonts/your-font.woff2 instead of ../fonts/your-font.woff2) to rule out path resolution issues. Also, make sure your font files aren't too large—mobile browsers might skip loading fonts that exceed ~100KB. Optimize them with a font compression tool to shrink the file size.

4. Debug with Browser DevTools #

Open up DevTools (F12) in each problematic browser, go to the Network tab, filter for "Fonts", then reload the page:

• If you see a 404 error: Your font path is wrong—double-check the file location.
• If you see a 403 error: CORS is the issue (head back to step 2).
• If the file loads successfully but the font still doesn't show: The font file might be corrupted. Try re-downloading or regenerating the font files.

5. Clear Browser Cache (Or Add Versioning) #

Sometimes browsers cache old, broken font files. Clear your browser cache, or add a version parameter to your font URLs to force a fresh load:

url('your-font-file.woff2?v=1.1')

Give these steps a shot—they cover 90% of cross-browser font issues. Let me know if you hit any snags!

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