@font-face自定义网页字体无法生效问题求助

Let’s walk through the fixes for your non-working web font—starting with the most obvious syntax issue in your @font-face rule, then a few other checks to ensure everything loads correctly.

1. Correct the @font-face Syntax #

Your current code has two critical issues that are blocking the font from loading properly:

• You duplicated the src property, which means the first .woff source gets completely overwritten by the second .ttf source. Browsers only respect the last src declaration when you repeat the property.
• There’s an extra semicolon after the first src line that breaks the rule’s structure.

Here’s the cleaned-up, valid version of your @font-face code:

@font-face { 
  font-family: 'TP'; 
  src: url('Think-Pink-Regular.woff') format('woff'), /* Modern Browsers */
       url('Think-Pink-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
}

This combines both font sources into a single src property (separated by commas) and removes the stray semicolon, so browsers can parse and prioritize both font files as intended.

2. Verify Font Loading in Developer Tools #

After fixing the syntax, confirm the font is actually loading:

• Open Chrome/Safari’s Developer Tools (F12 on Windows, Cmd+Opt+I on Mac)
• Switch to the Network tab, filter by "Fonts", then refresh the page. You should see both Think-Pink-Regular.woff and .ttf files load with a 200 status code.
• If they don’t load, double-check file permissions (make sure your server allows access to font files) and that filenames match exactly—case sensitivity matters on some servers!

3. Check Selector Accuracy & Browser Cache #

• Confirm your h6.categor-y3 selector is targeting the right element. Double-check the HTML element’s class name—could there be a typo like category-3 instead of categor-y3?
• Force a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to clear any cached CSS that might be ignoring your updated font rules.

4. Server MIME Type Check #

Some servers block font files if the correct MIME types aren’t configured. Ensure your server serves:

• .woff files with the font/woff MIME type
• .ttf files with the font/ttf MIME type
  You can verify this in the Network tab’s "Response Headers" for the font files—look for the Content-Type field matching the above.

Start with fixing the @font-face syntax first, since that’s the most likely culprit. Once that’s sorted, your font should render correctly in both Chrome and Safari.

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