IE 9及IE 11浏览器自定义字体无法加载问题求助

Hey there, let’s dig into why your custom Bourton font isn’t loading in those stubborn older IE versions. I’ve dealt with this exact headache before, so let’s go through the most common fixes step by step:

1. Verify Your EOT File & Path First #

IE 9 and below rely entirely on the EOT format, so this is the first thing to check:

• Double-check that BourtonBase.eot actually exists in your fonts/ directory. Try accessing the file directly in IE (e.g., http://your-site.com/fonts/BourtonBase.eot)—if you get a 404, your path is wrong (maybe it’s ./fonts/ or the folder name is capitalized differently?).
• Ensure the EOT file isn’t corrupted. Sometimes font conversion tools produce broken EOTs—try re-converting the TTF to EOT using a reliable tool like FontSquirrel’s Webfont Generator.

2. Fix Your @font-face Syntax #

Your current code has a small issue where the second src declaration overrides the first, and IE can be picky about format order and supported types. Here’s a revised version that’s more IE-friendly:

@font-face {
  font-family: 'Bourton';
  src: url('fonts/BourtonBase.eot'); /* IE8 fallback */
  src: url('fonts/BourtonBase.eot?#iefix') format('embedded-opentype'), /* IE9 */
       url('fonts/BourtonBase.woff') format('woff'), /* IE9+ and modern browsers */
       url('fonts/BourtonBase.ttf') format('truetype'); /* Fallback for others */
  font-weight: normal;
  font-style: normal;
}

• Adding the WOFF format is key for IE9—it supports WOFF natively, and this format often loads more reliably than EOT in IE9. Just make sure you generate a valid WOFF file for your font.
• Always explicitly define font-weight and font-style—IE sometimes ignores fonts when these are missing.

3. Check Server MIME Types #

Older IE versions will refuse to load fonts if your server doesn’t send the correct MIME types. For IIS (common for IE environments), add these MIME types:

• .eot: application/vnd.ms-fontobject
• .woff: application/font-woff
  If you’re using Apache, add these lines to your .htaccess file:

AddType application/vnd.ms-fontobject .eot
AddType application/font-woff .woff

4. Rule Out Cross-Domain Issues #

If your font files are hosted on a different domain or subdomain than your website, IE will block them by default. Fix this by configuring CORS on your server to allow font access—add the following response header:

Access-Control-Allow-Origin: *

(Or restrict it to your specific domain for better security.)

5. Check Font Embedding Permissions #

Some fonts have built-in restrictions that prevent them from being embedded in web pages. Use a tool like FontForge to check the font’s embedding flags:

• Open the font in FontForge, go to File > Font Info > PS Names
• Look for the Embedding field—if it’s set to "Preview & Print", IE won’t load it. Change it to "Editable" or "Installable" and re-export the font files.

6. Simplify to Test for Conflicts #

Sometimes other CSS or JavaScript can interfere with font loading in IE. Try creating a minimal test page:

• A basic HTML file with just a <body> tag containing some text
• Only your revised @font-face CSS and a rule like body { font-family: 'Bourton', Arial, sans-serif; }
  If the font loads here, the issue is with conflicting code in your main site.

7. IE11-Specific Fixes #

IE11 has its own quirks:

• Clear your browser cache—sometimes IE caches broken font files and won’t refresh them.
• Disable Compatibility View: Go to Tools > Compatibility View Settings and remove your site from the list.
• Add this meta tag to your HTML <head> to force IE11 to use its latest rendering engine:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Start with the first few steps (file path, syntax, MIME types)—those are the most common culprits. Let me know if any of these get your font working!

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