@Font-Face Not Working on Tumblr for Firefox

[LaurelBrittany]

Here’s another @font-face problem ^o^. I’m having an issue for getting @fontface to work on Tumblr.

@font-face {

font-family: 'Calliehand';

src: url('http://www.lwebdesigns.net/fonts/callie_hand-webfont.eot');

src: url('http://www.lwebdesigns.net/fonts/callie_hand-webfont.eot?#iefix') format('embedded-opentype'),

url('http://www.lwebdesigns.net/fonts/callie_hand-webfont.woff') format('woff'),

url('http://www.lwebdesigns.net/fonts/callie_hand-webfont.ttf') format('truetype'),

url('http://www.lwebdesigns.net/fonts/callie_hand-webfont.svg#WindsongRegular') format('svg');

font-weight: normal;

font-style: normal; }

It works in every browser but Firefox:

http://ldesigns01.tumblr.com/

The same CSS works on my server here:

http://www.lwebdesigns.net/fonts/testpage.html

Any idea why this would be happening?

[jamygolden]

I had a quick look and I suspect it may be a few things.

You have a property and value of:

font-family: Calliehand, "MV Boli", Arial, San Serif;

within the CSS. That should look something more like this:

font-family: "Calliehand", "MV Boli", sans-serif;

However the testpage.html font loads up correctly for me in Firefox but it doesn’t on the http://ldesigns01.tumblr.com/ page.

• I would suggest validating the HTML to make sure that’s not a problem.
• I would then double check the CSS to make sure there isn’t any little mistakes like the one I mentioned before
• If there is still a problem, I would create a new .html file, add the @font-face and try to apply the font
• Lastly if that’s still not working, I would imagine it’s the font’s fault. Try a font squirrel or Google font. That should work – and once that does you’d have confirmation that the .ttf is the problem – (but it does work for me on the testpage.html)

[LaurelBrittany]

Will do. Why does it need to be “Calliehand” ? I thought that single word fonts don’t need quotation marks. I tried a font from font squirrel a little while ago and I had the same problem.

[chrisburton]

@LaurelBrittany I used to wonder the same thing. I believe it’s just common practice to do it.

[LaurelBrittany]

Aa, in one of my web design classes I learned that single word fonts do not need quotations. Although this might not apply to externally loaded fonts.

As for HTML errors there were two that I have control over. I didn’t close a list item and there were multiples of one id. There were some issues with the tumblr audio player from what I can tell. And some tumblr iframe, I’m guessing it is the “follow” and “tumblr” buttons that are at the top right of every page.

As for css I had a lot of errors:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fldesigns01.tumblr.com%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

Most of these say “Property . . . does not exist”. I’m not sure how to deal with these.

[chrisburton]

CSS errors do not matter in validation. HTML validation is more of a guide not a penalty.

[LaurelBrittany]

Google Web Fonts work fine! I’m going to stick with that. It’s probably better to load fonts from them than from my server for a tumblr theme anyway. Thanks!

[LaurelBrittany]

Oops, now it doesn’t work for IE. Used a combo of the code above and Google :D.

[joshuanhibbert]

@LaurelBrittany If you want to check your CSS then you are best using CSS Lint. I would recommend reading the documentation to get an understanding of the warnings that may appear.

[poonu]

create fonts directory same place of CSS. copy all font in fonts folder.

@font-face {

font-family: 'Calliehand';

src: url('fonts/callie_hand-webfont.eot');

src: url('/fonts/callie_hand-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/callie_hand-webfont.woff') format('woff'),

url('/fonts/callie_hand-webfont.ttf') format('truetype'),

url('/fonts/callie_hand-webfont.svg#WindsongRegular') format('svg');

font-weight: normal;

font-style: normal; }

use font :
font-family: ‘Calliehand’, Arial;

[LaurelBrittany]

I cannot store Font Files on Tumblr. However, I guess I could have linked to an external stylesheet on my server.

[poonu]

@font-face fonts only work on their own domain. and other way create .htaccess trick to above cross domain font work.

[amire80]

Firefox is the only browser that implements the web fonts standard correctly for this matter. See the bug report: http://getsatisfaction.com/tumblr/topics/firefox_doesnt_load_web_fonts_font_face_on_tumblr_solution . Tumblr should fix this bug.

[Author]

Posts