页面更新时Chrome控制台出现net::ERR_ABORTED字体加载错误，如何修复？

Hey there! It’s definitely odd when a font shows up fine but throws an error in the console—let’s break down the most likely fixes for this issue:

• Double-check the font file path and existence
  First things first: make sure the OpenSans.woff file actually exists at http://localhost:9000/ (the root of your server). If it’s stored in a subfolder like /fonts/, your CSS should reference it as url('/fonts/OpenSans.woff') instead of the root path. Also, note that some servers (like Linux-based ones) are case-sensitive—confirm the filename matches exactly (e.g., OpenSans.woff vs opensans.woff).

• Verify your server’s static file configuration
  If you’re running a custom server (like Node.js/Express), ensure it’s properly serving the directory containing your font file. For example, in Express, you need to set up static file hosting with:

  app.use(express.static('public'));
  

  Also, make sure your server is sending the correct MIME type for WOFF files. Add this configuration if needed:

  app.use((req, res, next) => {
    if (req.path.endsWith('.woff')) {
      res.setHeader('Content-Type', 'font/woff');
    }
    next();
  });
  

  Incorrect MIME types can trigger abort errors even if the browser falls back to cached fonts.

• Clear browser cache and inspect the network request
  Sometimes the browser is using a cached version of the font while the current request fails. Open Chrome DevTools, go to the Network tab, check "Disable cache", then refresh the page. Look at the OpenSans.woff request details:

  • Is the status code 404 (file not found)? That confirms the path is wrong.
  • Do you see any CORS-related errors? If the font is being loaded from a different origin (even another port), you’ll need to adjust your server’s CORS settings.

• Validate your CSS @font-face syntax
  Make sure your font declaration doesn’t have typos or incorrect format values. A proper setup should look like this:

  @font-face {
    font-family: 'Open Sans';
    src: url('/OpenSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  

  If you’re referencing multiple font formats (e.g., WOFF2, TTF), one failed request might throw an error while the browser uses a working format for display.

• Check for conflicting font loading scripts
  If you’re using any third-party font loaders or async font loading code, they might be aborting the request prematurely. Temporarily disable these scripts to see if the error goes away.

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