字体不起作用

Question

此字体适用于w3schools网站，但不适用于我的网页和jsfiddle。

jsfiddle example

HTML

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

CSS

@font-face {
   font-family: "Penultimate";
    src: url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.eot");
    src: url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.eot?#iefix") format("embedded-opentype"),
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.woff") format("woff"),
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.ttf") format("truetype"),
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.svg#Penultimate") format("svg");
}

div {
   font-family: Penultimate;
}

Answer 1

JSFiddle使用HTTPS，因此出于安全原因，浏览器会阻止加载字体。您将在浏览器控制台中看到错误。

Firefox允许您通过单击地址栏的证书部分暂时忽略错误。