Forums

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?

jamy_za

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://ldesigns01.tumblr.com/&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.

treehouse : what would you like to learn today?

Forums

@Font-Face Not Working on Tumblr for Firefox