I’ve run into similar font sanitizer issues with Firefox and Rails before—let’s walk through the most likely culprits and fix your Apple Color Emoji problem step by step.

Common Causes & Fixes #

1. Corrupted or Unsupported Font Files #

Firefox’s font sanitizer is strict about file integrity and supported formats. If your local AppleColorEmoji files are damaged, or you’re relying on outdated formats like EOT (which Firefox doesn’t prioritize), you’ll get that rejection error.

• What to do:
  • Ditch the EOT file entirely—modern browsers (including Firefox) prefer woff2 and woff formats. Grab fresh, official copies of these font files (make sure they’re compatible with cross-browser use).
  • Verify the files are uncorrupted: try opening them in a font viewer app to confirm they load properly.

2. Rails Asset Pipeline Path Misconfiguration #

Rails 6’s asset handling (whether using Sprockets or webpacker) needs explicit setup to serve local fonts correctly. If your paths are off, Rails will generate broken URLs, triggering the sanitizer.

• Fix for Sprockets:
  1. Add your font directory to app/assets/config/manifest.js so Rails includes it during precompilation:

     //= link_tree ../fonts/color-emoji
     

  2. Use Rails’ asset_path helper in your SCSS/CSS to generate valid URLs:

     @font-face {
       font-family: 'AppleColorEmoji';
       src: url(asset_path('color-emoji/AppleColorEmoji/AppleColorEmoji.woff2')) format('woff2'),
            url(asset_path('color-emoji/AppleColorEmoji/AppleColorEmoji.woff')) format('woff');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
     }
     

• Fix for Webpacker/Jsbundling-Rails:
  • Move fonts to app/javascript/assets/fonts and use relative paths in your CSS, or configure url-loader in your webpack config to handle font files.

3. Missing MIME Type Configurations #

Rails might not be sending the correct MIME type headers for your font files, so Firefox doesn’t recognize them as valid fonts.

• Add MIME types:
  Open config/initializers/mime_types.rb and add these lines:

  Mime::Type.register "font/woff2", :woff2
  Mime::Type.register "font/woff", :woff
  

  Restart your Rails server to apply the changes.

4. Firefox’s Security Policy Restrictions #

Firefox enforces strict same-origin rules and checks for valid response headers. While this is less likely in local development, it’s worth checking:

• Verify response headers:
  In Firefox’s DevTools > Network tab, check the font file’s response headers. Make sure there’s no X-Content-Type-Options: nosniff header conflicting with font loading (though Rails defaults don’t add this in dev, it’s worth confirming).
  For production, ensure your server/CDN allows cross-origin requests for fonts if needed.

5. Font-Family Priority or Conflict #

Even if the font loads, your font-family: 'AppleColorEmoji' might be getting overridden by other CSS rules.

• Enforce font priority:
  Apply the font explicitly to emoji elements with higher specificity:

  .emoji-content {
    font-family: 'AppleColorEmoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
  }
  

  Use DevTools’ Computed tab to confirm AppleColorEmoji is the active font for your emoji elements.

Final Checks #

After applying these fixes, clear your browser cache and restart Rails. Test again in Firefox—if the sanitizer error is gone, your emoji should load correctly.

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