Grow your CSS skills. Land your dream job.

@Font-Face Not Working on Tumblr for Firefox

  • # December 6, 2011 at 3:46 pm

    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?

    # December 6, 2011 at 4:26 pm

    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)
    # December 6, 2011 at 4:28 pm

    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.

    # December 6, 2011 at 4:50 pm

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

    # December 6, 2011 at 4:57 pm

    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.

    # December 6, 2011 at 5:04 pm

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

    # December 6, 2011 at 5:13 pm

    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!

    # December 6, 2011 at 5:30 pm

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

    # December 6, 2011 at 5:46 pm

    @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.

    # December 7, 2011 at 2:02 am

    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;

    # December 7, 2011 at 10:51 am

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

    # December 8, 2011 at 6:17 am

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

    # December 19, 2011 at 11:07 am

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".