字体面不加载(Font-Face Not loaded)

我使用的一些人造的字体在我的网站，但我得到probleme与一个它不加载，我想不通的probleme，下面的代码：

@font-face { 
    font-family: OuachitaWayWbw; 
    src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    font-family: 'ChromeYellowNF'; 
    src: url('fonts/Chrome Yellow NF.ttf');
}

#name { 
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}

该ChromeYellowNF工作的。 还我试图把每一个在向度Font-face ，但我以前不工作。

Answer 1:

你必须有一个@字体面对面声明每种字体：

@font-face { 
  font-family: OuachitaWayWbw; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: ChromeYellowNF; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

单引号不是必需的。

如果你想使用自定义字体为IE9你还需要提供一个“.eot”字体文件。 http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

编辑：好的，不同的浏览器有实现的字体不同的方式：

@font-face {
   font-family: OuachitaWayWbw; 
   src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"),
        url('fonts/Ouachita Way Wbw.woff') format("woff");
   src: url('fonts/Ouachita Way Wbw.eot');
}

您可能还需要以下类型添加到一个.htaccess / IIS：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

从这里取： 字体面与错误的MIME类型在Chrome

Answer 2:

不知道这个，但它看起来像你FONT-FAMILY名字也许应该加上引号。 您也可以尝试把每个字体在有自己的@ font-face声明。 这应该解决您的问题。 我认为这是采取的@ font-face声明中指定的最后FONT-FAMILY。

@font-face { 
  font-family: 'OuachitaWayWbw'; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: 'ChromeYellowNF'; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

#name {
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}

文章来源: Font-Face Not loaded