CSS @font-face Not Rendering in Firefox

Despite functioning correctly in Google Chrome and Internet Explorer, the CSS @font-face rule is not working in Firefox. Although the @font-face code appears to be valid, the issue seems to be specific to Firefox. Troubleshooting this discrepancy requires understanding the configuration and settings within Firefox.

Local File URI Policy

Firefox employs a strict policy regarding file URI origins (file:///), which can hinder the loading of local resources. To address this issue, navigate to "about:config" in the Firefox address bar, filter by "fileuri," and toggle the "security.fileuri.strict_origin_policy" preference to false. This allows Firefox to behave similarly to other browsers when handling local font resources.

Cross-Domain Issues

If the site is published and the problem persists, it may be necessary to consider a potential cross-domain issue. Even though relative paths are specified in the code, adding an additional header in the .htaccess file is recommended:

    
        Header set Access-Control-Allow-Origin "*"
    

This header should prevent any potential cross-domain restrictions. Additionally, it is possible to use base64 encoding for the font typeface, which may also resolve the issue.

For further information and a comprehensive overview, refer to the resource provided in the answer.