CSS @font-face 在 Firefox 中无法正常工作，但在 Chrome 和 IE 中可以。

尝试减弱在@font-face指令中的本地源声明。
无论是Firefox还是Google Font API中都存在一个已知的错误，如果字体已经在本地安装并且与定义的本地名称匹配，则无法使用字体的变体。

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

为了有效地削弱本地声明，只需将本地源字符串设置为一些无意义的内容即可。通常接受的惯例是使用笑脸 unicode 字符（“☺”）。为什么呢？Paul Irish 在他的博客上有一个很好的解释：

http://paulirish.com/2010/font-face-gotchas/#smiley

这里有一个需要添加到列表中的问题。我发现如果你指定一个本地的src并且它的名称与通用字体名称相匹配，这会在Firefox（只有在Firefox中）中破坏整个规则。例如：

@font-face {
  font-family: code;
  src: local(Monaco),
       url(monaco.woff2) format("woff2"),
       local(monospace);
}

这段代码在Firefox（版本95.0.2）中会失败，并显示未经过样式修饰的默认文本（Times），因为最后一个src值匹配了Firefox支持的通用字体（monospace）的名称。以下值也以同样的方式失败：

• cursive
• fantasy
• monospace
• sans-serif
• serif
• system-ui

这肯定是个边缘情况（可能是一个bug），但它可能有助于某些人。你不能通过这种方式回退到通用字体，如果出于某种原因，你真的需要引用同名的本地字体，你应该将其放在引号之间。

如果您尝试导入外部字体，您可能会面临Firefox和其他浏览器中最常见的问题之一。有时您的字体在Google Chrome或其他浏览器中运行良好，但不是在每个浏览器中。
这种类型的错误有很多原因，其中一个最大的原因是先前定义的字体。您需要在CSS代码的每行末尾添加!important关键字，如下所示：
例子：

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

描述： 在您的CSS文件或此处输入上述代码。 在上面的示例中，将“Hacen Saudi Arabia”替换为您的字体系列，并根据您的字体目录替换URL。

如果在您的CSS代码中输入!important，则浏览器会自动关注此部分并覆盖先前使用的属性。 有关更多详细信息，请访问：https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

这是一个与字体路径设置有关的问题。由于您没有以“/”开头的路径，因此Firefox将尝试根据样式表所在的路径查找字体。因此，基本上，Firefox正在寻找您的字体位于“root/css/font”目录而不是“root/font”目录中。您可以通过将字体文件夹移动到css文件夹中或在字体路径的开头添加“/”来轻松解决此问题。
请尝试一下：

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

当我遇到这个问题时，使用 .htaccess 访问控制允许来源规则对我没有起作用。

相反，在 web.config 中的 IIS 中插入下面显示的 system.webServer 块。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

这对我来说非常有效。如果您需要限制访问特定域名，请将 * 替换为该域名。

我遇到了在Firefox中无法正确显示字体的问题。这是我发现适用于我的解决方法。在url属性中，在字体所在目录之前添加一个斜杠。以下是我的修改前后版本：

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

注意在url中'fonts'前面有一个斜杠吗？这告诉浏览器从根目录开始访问资源。至少对我来说，问题已解决。

你是在本地文件中测试还是从Web服务器上进行测试？处于不同目录中的文件被认为是跨域规则中的不同域，因此如果你正在本地测试，则可能会遇到跨域限制。
否则，指向出现问题的URL可能会有所帮助。
另外，我建议查看Firefox错误控制台，看看是否报告了任何CSS语法错误或其他错误。
此外，我注意到您可能希望在第二个@font-face规则中使用font-weight:bold。

也许你的问题是命名问题，特别是涉及到使用（或不使用）空格和连字符。

我曾经遇到过类似的问题，我认为通过在字体/家族名称周围放置可选引号（'）来解决了这个问题，但实际上这隐含地解决了一个命名问题。

我对CSS规范并不完全了解，而且不同的客户端解释规范存在一些歧义（至少对我来说是这样）。此外，它似乎也与PostScript命名约定有关，但如果我错了，请纠正我！

无论如何，据我现在所理解的，你的声明正在使用两种可能不同的风格混合。

@font-face {
  font-family: "DroidSerif Regular";

如果您认为Droid是实际的姓氏，其中Sans和Serif是成员，就像他们的孩子Sans Regular或Serif Bold一样，那么您可以在标识符之间使用空格来连接，或者删除空格并使用驼峰命名法表示familyName，并使用连字符表示子标识符。

应用于您的声明，它看起来会像这样：

@font-face {
  font-family: "Droid Serif Regular";

或者

@font-face {
  font-family: DroidSerif-Regular;

我认为两种方式都应该是完全合法的，无论是否使用引号，但在不同的客户端之间，我在这方面取得了一些混合的成功。也许有一天，我会有时间弄清楚这些问题的细节。

我发现这篇文章对理解涉及的某些方面很有帮助： http://mathiasbynens.be/notes/unquoted-font-family

这篇文章具有关于PostScript的更多细节，以及一些链接到Adobe规范PDF的链接： http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

我之前也遇到了同样的问题，并通过添加 content 的 meta 标签来解决：

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

如果你的HTML中有Unicode文本，那么在Firefox和Edge浏览器中会出现这种情况。

不需要在设置中瞎搞，只需从 font-family 中删除引号和空格：

这个

body {font-family: "DroidSerif Regular", serif; }

变成了这个

body {font-family: DroidSerifRegular, serif; }