使用W3 Total Cache压缩CSS时，如何处理WordPress相对字体链接？

Let me break down what's happening here and walk you through actionable fixes:

The Root Problem #

When W3 Total Cache minifies and compresses your CSS, it moves the processed style.css file into a cache directory (usually something like /wp-content/cache/minify/xxxx/). Your original @font-face rules use relative paths tied to your theme's root directory, but once the CSS is relocated, those paths start pointing to the cache folder instead of your theme's fonts folder. That’s why fonts load fine without compression, but break when you turn it on.

Solution 1: Use Absolute Paths (Most Reliable) #

Instead of relative paths in your @font-face rules, use absolute paths that directly target your theme's fonts folder. Using WordPress native functions ensures maintainability even if you rename your theme later:

1. Open your theme's functions.php file.
2. Add a function to output the @font-face rules with dynamic absolute paths (and remove the original block from style.css):

function enqueue_custom_fonts() {
    $font_base_url = get_theme_file_uri('fonts/');
    ?>
    <style>
    @font-face {
        font-family: 'foo';
        src: url('<?php echo $font_base_url; ?>foo and bar.eot');
        src: url('<?php echo $font_base_url; ?>foo and bar.eot?#iefix') format('embedded-opentype'),
             url('<?php echo $font_base_url; ?>foo and bar.woff') format('woff'),
             url('<?php echo $font_base_url; ?>foo and bar.ttf') format('truetype'),
             url('<?php echo $font_base_url; ?>foo and bar.svg#svgFontName') format('svg');
    }
    </style>
    <?php
}
add_action('wp_head', 'enqueue_custom_fonts');

This ensures font paths always point to the correct theme directory, no matter where the CSS is stored after compression.

Solution 2: Configure W3 Total Cache to Rewrite Paths #

W3 Total Cache has a built-in setting to fix relative paths during minification:

• Go to Performance > Minify in your WordPress dashboard.
• Under the CSS section, look for the Rewrite URL structure option (it may be under advanced settings depending on your W3TC version).
• Enable this option and save your changes.

Note: This might fail if your font filenames have spaces (like foo and bar.eot). Special characters can throw off path rewriting—if this happens, rename your font files to use hyphens/underscores (e.g., foo-and-bar.eot) and update your @font-face rules to match.

Solution 3: Exclude style.css from Minification (Last Resort) #

If you don’t want to modify code or adjust settings, you can exclude your theme’s style.css from W3 Total Cache’s minification:

• Go to Performance > Minify > CSS
• In the Exclude CSS from minification field, add the path to your style.css (e.g., wp-content/themes/your-theme-name/style.css)
• Save your settings.

This keeps your original CSS intact with working relative paths, but you’ll lose the performance benefits of minifying that file—only use this if the other solutions don’t work.

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