iPhone端@font-face字体不生效问题求助

Hey there, let’s work through this annoying font issue you’re dealing with—nothing’s more frustrating than desktop rendering perfectly but mobile falling back to Times New Roman! Here are the most likely fixes tailored to your setup:

Key Issues to Address #

1. Fix the font-family name mismatch #

This is probably the biggest culprit! Your @font-face rule defines the font as 'SF Distant Galaxy' (with spaces), but in your #title CSS, you’re calling 'SFDistantGalaxy' (no spaces). iOS is strict about exact name matches, while desktop browsers might cut you some slack.

Update your title selector to use the exact font name from @font-face:

#title {
  font-family: 'SF Distant Galaxy'; /* Match this to your @font-face definition */
  letter-spacing: 3.3px;
  text-align: center;
  color: #f8e71c;
  font-size: 95px;
}

Or, if you prefer, rename the font-family in @font-face to 'SFDistantGalaxy'—just make sure both places use the exact same string.

2. Check for case-sensitive file path errors #

iOS uses a case-sensitive file system, unlike macOS (which is case-insensitive by default). Double-check that your font filenames (e.g., SFDistantGalaxy.woff2) match exactly what’s in your CSS—capitalization included. If your actual file is named sfdistantgalaxy.woff2 but your CSS uses uppercase, iOS will throw a 404 and skip loading the font.

3. Add font-display to improve loading behavior #

iOS can be finicky about font loading timing. Adding font-display: swap; to your @font-face rule tells the browser to use a fallback font temporarily while your custom font loads, then swap it in once ready. This prevents it from sticking with Times New Roman if the font takes a moment to load.

Here’s your updated @font-face code:

@font-face {
  font-family: 'SF Distant Galaxy';
  src: url('./files/SFDistantGalaxy.eot');
  src: url('./files/SFDistantGalaxy.eot?#iefix') format('embedded-opentype'),
       url('./files/SFDistantGalaxy.woff2') format('woff2'),
       url('./files/SFDistantGalaxy.woff') format('woff'),
       url('./files/SFDistantGalaxy.ttf') format('truetype'),
       url('./files/SFDistantGalaxy.svg#SFDistantGalaxy') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Add this line */
}

4. Verify font files are loading correctly #

Use Safari’s Web Inspector to debug:

• Connect your iPhone to a Mac, open Safari on both devices.
• On your Mac, enable the Develop menu (Safari → Settings → Advanced → Show Develop menu in menu bar).
• Go to Develop → [Your iPhone’s name] → [Your website’s tab].
• In the Network tab, filter for "Fonts" and check if your font files are returning a 200 OK status. If you see 404 errors, your file path is wrong—adjust the url() paths in your CSS to match where the fonts are hosted.

5. Clear Safari’s cache on your iPhone #

Old cached CSS or font files might be causing issues. Head to Settings → Safari → Clear History and Website Data, then reload your site to test with fresh resources.

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