WordPress自定义字体加载异常（404）及CSS源文件修改位置求助

First, let’s break down what’s happening: that 404 error means your server can’t find the .ttf file at the path specified on those problematic pages. The differing font links you noticed are almost certainly the root cause—likely relative paths that don’t work across all page structures, or incorrect absolute paths.

Here’s how to track down and modify the source CSS files in WordPress, even if you’re new to it and the site was built by a third party:

Step 1: Identify where the font is being declared #

Before diving into files, use your browser’s dev tools to pinpoint exactly which CSS rule is loading the font (and which file it’s coming from):

• Right-click any text that should use the custom font and select Inspect (Chrome/Firefox).
• In the Styles panel, look for the @font-face rule that defines your font. It’ll look something like this:

  @font-face {
    font-family: 'MyCustomFont';
    src: url('../fonts/myfont.ttf') format('truetype');
  }
  

• Hover over the file path next to the rule—this will show you the full URL the browser is trying to access (confirm it’s the wrong path).
• Click the filename linked in the Styles panel to open the CSS file in the Sources tab. Note the file’s location (e.g., /wp-content/themes/your-theme/style.css or a plugin’s CSS file).

Step 2: Locate the CSS file in WordPress #

Once you know the file path, you can edit it directly in WordPress (or via FTP if you prefer):

Option A: Use the WordPress Theme/Plugin Editor #

1. Log into your WordPress admin dashboard.
2. For theme-related CSS: Go to Appearance > Theme File Editor.
   • If the site uses a child theme (always recommended for customizations), make sure you’re editing the child theme’s files (not the parent) to avoid losing changes when the theme updates.
   • Look for the CSS file you identified (e.g., style.css, fonts.css, or a template-specific CSS file like page-about.css).
3. For plugin-related CSS: Go to Plugins > Plugin File Editor, select the plugin that’s handling your fonts, and find the relevant CSS file.

Option B: Use FTP (if the editor is disabled) #

If your hosting provider has disabled the file editor, connect to your site via FTP (use tools like FileZilla):

• Navigate to the path you noted earlier (e.g., wp-content/themes/your-theme/ or wp-content/plugins/your-font-plugin/).
• Download the CSS file, edit it with a text editor (like Notepad++ or VS Code), then upload it back to the same location.

Step 3: Fix the font path #

The most reliable fix is to use an absolute path instead of a relative one. Here are two ways to do this:

1. Full absolute URL: Replace the relative path with the full URL to your font file. For example:

   src: url('https://yourdomain.com/wp-content/uploads/fonts/myfont.ttf') format('truetype');
   

   (You can get the full URL by going to Media > Library in WordPress, finding your font file, and copying its "File URL".)
2. WordPress dynamic path (for theme files): If you’re editing a theme file, use WordPress functions to generate the correct path automatically. This ensures it works even if your site’s domain changes:

   @font-face {
     font-family: 'MyCustomFont';
     src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/myfont.ttf') format('truetype');
   }
   

   (Note: This only works in PHP files, not pure CSS files. If you’re editing a .css file, stick to the full absolute URL.)

Step 4: Clear cache & test #

After making changes, clear:

• Your browser’s cache (Ctrl+Shift+Refresh on Windows, Cmd+Shift+Refresh on Mac).
• Any WordPress caching plugins (like WP Rocket, W3 Total Cache, or Cloudflare if you use it).
  Then visit the problematic pages to confirm the font loads correctly and the 404 error is gone.

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