Only one of my custom fonts are rendering in Firefox

Question

Only one of my custom fonts are rendering in Firefox (DroidSans)

My website is: www.callumritchie.com

Please Help!

Thank you.

@font-face {
font-family: 'Znikomit-forMac';
src: url('Znikomit-forMac.eot?#iefix') format('embedded-opentype'), 
     url('Znikomit-forMac.woff') format('woff'), 
     url('Znikomit-forMac.ttf')  format('truetype'),
     url('Znikomit-forMac.svg#svgDroidSans') format('svg'),
         url('Znikomit-forMac.otf') format('otf');

}


@font-face {
font-family: 'StMarie-Thin';
src: url('StMarie-Thin.eot?#iefix') format('embedded-opentype'), 
     url('StMarie-Thin.woff') format('woff'), 
     url('StMarie-Thin.ttf')  format('truetype'),
     url('StMarie-Thin.svg#svgStMarie-Thin') format('svg')
         url('StMarie-Thin.otf') format('otf');
}


@font-face {
font-family: 'DroidSans';
src: url('DroidSans.eot?#iefix') format('embedded-opentype'), 
     url('DroidSans.woff') format('woff'), 
     url('DroidSans.ttf')  format('truetype'),
     url('DroidSans.svg#svgDroidSans') format('svg');
}

Znikomit-forMac works on my FF (even though it is not being used for any text currently - I can see it if I manually replace the CSS) — andi, Aug 20 '13 at 21:01

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Your browser has an error console (Firefox: Tools > Error Console. Choose Errors tab). When I opened www.callumritchie.com my (Google Chrome) Error Console it displays the following errors:

GET http://www.callumritchie.com/jquery.lazyload.js 404 (Not Found) www.callumritchie.com/:7

There is no http://www.callumritchie.com/jquery.lazyload.js. Your website points to jquery.lazyload.js at line 7 of www.callumritchie.com. Fix the path or move jquery.lazyload.js to the right folder.

Uncaught TypeError: Object [object Object] has no method 'lazyload' script.js:96

In script.js line 96 the method 'lazyload' has a TypeError. I think script.js misses the jquery.lazyload.js.

Resource interpreted as Font but transferred with MIME type application/x-font-woff: "http://www.callumritchie.com/DroidSans.woff". www.callumritchie.com/:1

If you don't know what the error means you can query the error message in Google. First hit: Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream

GET http://www.callumritchie.com/JosefinSansStd-Light.woff 404 (Not Found)

Like the first error. http://www.callumritchie.com/JosefinSansStd-Light.woff not found. Fix the path aad the file or move the file.

www.callumritchie.com/:1
    Resource interpreted as Font but transferred with MIME type application/x-font-woff: "http://www.callumritchie.com/StMarie-Thin.woff". www.callumritchie.com/:1

Same as the other one.

So the answer to your question is. 1) A font file doesn't exist or isn't in the place where it should be. 2) Your server returns the wrong mime-type for two font files. Therefore these files are misunderstood. Adding the right AddType declarations to .htaccess will fix this.

Not sure I understand - But when I go on my website using firefox, the looping words on the homepage are not rendered in the correct font. — Callum, Aug 21 '13 at 14:40

Only one of my custom fonts are rendering in Firefox

1 Answers1