Font not working

Question

This font works on w3schools website, but not on my webpage and 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 uses HTTPS, therefore browsers block loading the font for security reasons. You will see errors in the browser console.

Firefox allows you to temporarily ignore the errors by clicking on the certificate section of the address bar.