为何JS函数在Firefox中无法获取字体？Chrome下运行正常

Hey there, let’s break down why your JavaScript font-fetching code is behaving differently across Chrome and Firefox—cross-browser font handling has a few tricky edge cases, so here are the most likely fixes:

1. Double-Check Font Name Accuracy (Firefox is Strict!) #

Chrome is pretty forgiving when matching font names, but Firefox requires exact matches for the font’s internal family name, including weights and styles. For example:

• If your font is registered as "Roboto Bold" (with a space and explicit weight), calling document.fonts.check('16px Roboto') might work in Chrome but fail in Firefox.
• Always use the exact family name embedded in the font file (you can check this with tools like Font Book on macOS or Character Map on Windows).

2. Wait for Fonts to Fully Load Before Checking #

Firefox’s font loading pipeline can be slower or timed differently than Chrome’s. If your code runs before the font finishes registering, it’ll return false even if the font exists. Use document.fonts.ready to wait for all fonts to load:

// Wrap your font-checking logic in this promise
document.fonts.ready.then(() => {
  // Use exact font specs: size, family name, weight/style if needed
  const fontExists = document.fonts.check('16px "Roboto Bold"');
  
  if (fontExists) {
    // Your font-dependent logic here
    console.log("Font loaded successfully!");
  } else {
    console.log("Font not found—verify the name or loading source");
  }
});

3. Verify Font Format & Loading Source #

While modern browsers support WOFF2, ensure your font files are served in formats Firefox recognizes (WOFF/WOFF2 are safe bets). Also:

• If using a CDN, confirm Firefox isn’t blocking third-party fonts via privacy settings (check Settings > Privacy & Security > Enhanced Tracking Protection to see if fonts are being blocked).
• Make sure your CSS @font-face rules are correctly formatted—Firefox won’t register fonts if the src paths are broken or the font-family name doesn’t match what you’re using in JS.

4. Check for Firefox-Specific API Behavior #

Older versions of Firefox had limited support for some document.fonts methods. If you’re using document.fonts.add(), ensure you’re passing a valid FontFace object with correct parameters:

// Example of properly adding a font in cross-browser compatible way
const myFont = new FontFace('MyCustomFont', 'url(myfont.woff2) format("woff2")');
myFont.load().then((loadedFont) => {
  document.fonts.add(loadedFont);
  // Now you can safely check for the font
  console.log(document.fonts.check('16px MyCustomFont'));
}).catch((error) => {
  console.error("Font failed to load:", error);
});

Start with the first two checks—font name accuracy and waiting for font readiness—those are the most common culprits for this exact issue!

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