Node.js中如何加载.ttf与.woff字体文件？解决加载报错

Got it, let's get those icons showing up again! The ERR_ABORTED errors you're seeing are directly caused by your Node.js server not sending the correct Content-Type headers for .ttf and .woff font files. Browsers rely on these headers to know how to process the file, so without them, the request gets blocked.

Here's exactly how to update your switch (extname) block in server.js:

Step-by-Step Code Modification #

Locate the section in your server code where you set the contentType based on file extensions. Add two new case entries for .ttf and .woff (you can add .woff2 too, just in case you need it later):

switch (extname) {
  // Keep your existing cases here (html, js, css, etc.)
  case '.html':
    contentType = 'text/html';
    break;
  case '.js':
    contentType = 'text/javascript';
    break;
  case '.css':
    contentType = 'text/css';
    break;
  
  // Add these two cases for font files
  case '.ttf':
    contentType = 'font/ttf';
    break;
  case '.woff':
    contentType = 'font/woff';
    break;
  
  // Optional: Add woff2 support if needed
  case '.woff2':
    contentType = 'font/woff2';
    break;
  
  default:
    contentType = 'application/octet-stream';
}

Quick Notes #

• Double-check that your font files are actually in the path the browser is requesting (http://127.0.0.1:5050/assets/web/assets/mobirise-icons/). If the files are missing or the path is wrong, even correct headers won't fix the issue.
• Make sure your server has read permissions for the font directory and files—permission issues can also trigger ERR_ABORTED.

Restart your Node.js server after making this change, and your icons should load without errors!

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