@font-face Not Working At All

I dont understand whats going on here because when I had this code on its own it was working (in FireFox): @font-face { font-family: 'mmfont'; src: url('/scripts/mmfont.ttf

Solution 1:

We couldn't figure out another way around, as it appeared all of our settings on Amazon were fine. Instead, we just embedded the font definition itself into a data-uri call, as seen below. Much of the font definition has been omitted to size constraints of answers in StackOverflow, but this should give you a good idea of our approach.

@font-face {
    font-family: "PFDinTextPro-Light";
    src: url("233cd7_2_0-webfont.eot");
}
@font-face {
    font-family: "PFDinTextPro-Light";
    font-style: normal;
    font-weight: normal;
    src: url("233cd7_2_0-webfont.eot?#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFq4ABEAAAAAmrQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcYqvy...dRcDMyMXA5M2mM+m4LqJvRPKYQVy2CKhHBYgh9USyuGAaJOCaeMESnLMgHAYN3BBDecFinIdZ9LeyOxWBuTyALm8+XAuN5DLEwjn8oGM5Kr/zwAX4Qcq4HsC5woAufy1MG7kBhFtANGLRQMAAVB7j+oAAA==") format("woff"), url("233cd7_2_0-webfont.ttf") format("truetype");
}

Solution 2:

Hey now correct to your font url in css as like this

url('mmfont.eot');

i think your font and css file in one folder of scripts

Solution 3:

Know it's over a year later but just incase anyone comes looking, I'm betting the questioner was hosting their website on AWS -- you have to create a CORS rule to get AWS to read @font-face kit. Try this fix as described here: http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/