自定义字体加载遭CORS拦截，寻求解决方案

Hey Joey, let's work through this custom font problem together. You mentioned your TypoGraphica font is stored at assets/fonts/TypoGraphica.eot but isn't loading, even with your @font-face rule set up. Let's break down the most common fixes to get this working:

1. Double-Check File Paths & Spelling #

First, let's make sure the path to your font files is correct. The font-url() helper can behave differently depending on your framework (like Rails), so sometimes switching to a direct relative path fixes things. If your font.scss lives in assets/stylesheets/, the relative path to your fonts would be ../fonts/:

@font-face {
 font-family:"TypoGraphica";
 src: url("../fonts/TypoGraphica.eot?") format("eot"),
      url("../fonts/TypoGraphica.woff") format("woff"),
      url("../fonts/TypoGraphica.ttf") format("truetype"),
      url("../fonts/TypoGraphica.svg#TypoGraphica") format("svg");
}

Also, verify that all four font files (eot, woff, ttf, svg) exist in assets/fonts/ and that their filenames match exactly (capitalization matters—typographica.eot is not the same as TypoGraphica.eot).

2. Fix Asset Precompilation (If Using Rails) #

If you're working in a Rails app, fonts often need explicit configuration to be included in asset precompilation:

1. Open config/initializers/assets.rb and add these lines:

   Rails.application.config.assets.paths << Rails.root.join('assets', 'fonts')
   Rails.application.config.assets.precompile += %w( *.eot *.woff *.ttf *.svg )
   

2. Clear your cache and recompile assets (for development, just clearing cache might suffice):

   rails tmp:clear
   rails assets:precompile # Only needed for production/deployment
   

3. Diagnose with Browser Dev Tools #

Open your browser's developer tools (F12), go to the Network tab, and refresh the page. Look for requests to your font files:

• If you see a 404 Not Found status: Your path is still incorrect—double-check where your CSS is being served from vs. where the fonts are stored.
• If you see other errors (like CORS): This is less common in local development, but if you're serving fonts from a different domain, you'll need to adjust server headers.

4. Verify Your Font Usage #

Make sure your .typographica class is correctly referencing the font, and add a fallback font to confirm if the issue is with loading or usage:

.typographica {
  font-family: "TypoGraphica", Arial, sans-serif;
}

Also, check that this class is actually applied to the HTML elements you want to style—sometimes a missing class can make it seem like the font isn't loading.

5. Test with Absolute Paths (Temporary) #

To rule out relative path confusion, try using an absolute path for testing. If your local server runs at http://localhost:3000, the path would be /assets/fonts/TypoGraphica.eot:

@font-face {
 font-family:"TypoGraphica";
 src: url("/assets/fonts/TypoGraphica.eot?") format("eot"),
      url("/assets/fonts/TypoGraphica.woff") format("woff"),
      url("/assets/fonts/TypoGraphica.ttf") format("truetype"),
      url("/assets/fonts/TypoGraphica.svg#TypoGraphica") format("svg");
}

If this works, the issue is with how your framework resolves asset paths, and you can adjust your helper function or configuration accordingly.

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