Mac系统下Elementor搭建的WordPress站点字体覆盖问题求助

Let’s work through this font replacement issue together — it’s a common headache with Elementor sites on Mac, and usually comes down to specificity conflicts, system font name collisions, or browser rendering quirks. Here’s what you can try:

1. Avoid System Font Name Conflicts #

Your current @font-face uses 'verdana' as the font family name, which matches the pre-installed Verdana on Mac. Browsers often prioritize system fonts over custom web fonts with identical names, even when you use !important.

Fix this by renaming your custom font to something unique (like 'CustomVerdana') to eliminate the conflict:

@font-face {
  font-family: 'CustomVerdana';
  src: url('wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.eot');
  src: url('wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.eot?#iefix') format('embedded-opentype'),
       url('wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.woff2') format('woff2'),
       url('wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.woff') format('woff'),
       url('wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.ttf') format('truetype'),
       url('wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.svg#CustomVerdana') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* Forces custom font to load before falling back to system fonts */
}

2. Boost CSS Specificity to Override Elementor #

Elementor injects inline styles directly into elements, which can override your external CSS even with !important. Use a more specific selector to target every element on your Elementor pages:

html body.elementor-page,
html body.elementor-page * {
  font-family: 'CustomVerdana', Helvetica, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Fixes Mac-specific font rendering inconsistencies */
}

The -webkit-font-smoothing and -moz-osx-font-smoothing properties also help ensure your custom font renders consistently across Mac browsers.

3. Check Elementor’s Global Font Settings #

Elementor has its own global typography controls in Site Settings > Typography. If you’ve set a default font there, it will generate high-priority inline styles that can override your custom CSS.

You have two options here:

• Add your CustomVerdana as a custom font in Elementor, then set it as the primary/body font in the global settings
• Disable Elementor’s global typography settings entirely to let your custom CSS take full control

4. Verify Font File Loading #

Use Safari’s Web Inspector (press Cmd+Opt+I) to confirm your font files are loading correctly:

1. Go to the Network tab and filter by "Fonts"
2. Check that all your Verdana font files return a 200 status code (not 404). If any are missing, double-check your file paths for typos.

5. Clear Browser Cache #

Mac browsers like Safari cache fonts aggressively. Test your changes in a private browsing window first, or clear your cache (Cmd+Opt+E) to ensure you’re seeing the latest CSS and font files.

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