@font-face与@font-family无法生效问题求助

Hey there! I get it—trying to get multiple fonts working on your page can feel frustrating when things aren't clicking, even after checking examples. Let's break down the most reliable ways to add three fonts, plus the common mistakes that might be tripping you up.

Common Methods to Add Fonts #

1. Using Web Safe Font Stacks (No External Files Needed) #

These are fonts pre-installed on most devices. To use three different ones, define them in your CSS and apply them to specific elements.

Example CSS:

/* Assign fonts to different elements */
body {
  font-family: Arial, Helvetica, sans-serif; /* First font + fallbacks */
}

h1, h2 {
  font-family: 'Times New Roman', Times, serif; /* Second font + fallbacks */
}

.special-notes {
  font-family: Courier, 'Courier New', monospace; /* Third font + fallbacks */
}

Common Pitfall: Forgetting fallback fonts (like sans-serif or serif)—these ensure your text remains readable if the primary font isn't available on a user's device.

2. Using a Font Service (e.g., Google Fonts) #

If you want custom, non-system fonts, services like this make implementation straightforward.

Step 1: Link the fonts in your HTML <head>

<head>
  <!-- Connect to the font service and load three fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&family=Montserrat&display=swap" rel="stylesheet">
</head>

Step 2: Apply the fonts in CSS

body {
  font-family: 'Roboto', sans-serif;
}

.page-title {
  font-family: 'Montserrat', sans-serif;
}

.card-content {
  font-family: 'Open Sans', sans-serif;
}

Common Pitfalls:

• Typos in the font name (match it exactly to the service's provided name—e.g., 'Montserrat' with quotes, not just Montserrat)
• Omitting the crossorigin attribute on the preconnect link, which can cause font loading failures in some browsers
• Skipping the generic fallback (like sans-serif)

3. Self-Hosting Custom Fonts #

If you have your own font files (.woff2, .woff, .ttf), use @font-face in CSS to define them.

Example CSS:

/* Define each font with @font-face */
@font-face {
  font-family: 'HandwrittenFont';
  src: url('fonts/handwritten.woff2') format('woff2'),
       url('fonts/handwritten.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BoldDisplayFont';
  src: url('fonts/bold-display.woff2') format('woff2');
  font-weight: bold;
}

@font-face {
  font-family: 'ItalicScript';
  src: url('fonts/italic-script.woff2') format('woff2');
  font-style: italic;
}

/* Apply the fonts to elements */
body {
  font-family: 'HandwrittenFont', sans-serif;
}

.section-heading {
  font-family: 'BoldDisplayFont', sans-serif;
}

.quote-text {
  font-family: 'ItalicScript', sans-serif;
}

Common Pitfalls:

• Incorrect file paths (double-check the url() points to the right location—e.g., if your CSS is in a css folder and fonts are in a sibling fonts folder, use ../fonts/handwritten.woff2)
• Missing font formats (.woff2 is widely supported, but adding .woff as a fallback helps older browsers)
• Mismatched font-weight/font-style (if your font file is bold, set font-weight: bold in @font-face to match when you apply bold styling to elements)

Quick Debug Checklist #

• Did you correctly link the fonts (either via a service link or @font-face)?
• Are you applying the font-family to the right HTML elements?
• Did you spell the font name exactly as defined (capitalization matters!)?
• For self-hosted fonts, is the file path correct?

If you share your exact HTML and CSS code, I can help spot the specific issue—but these steps should cover most common problems!

内容的提问来源于stack exchange，提问作者M.K