Grow your CSS skills. Land your dream job.

Font-Face Problem with Firefox v.12

  • # April 26, 2012 at 9:54 am

    Hi,
    I’m having a big problem with Firefox 12.0 trying to get font-face working.
    The thing is it seems to get totally ignored but it’s loaded correctly (response 200 OK)

    I was searching google up and down but mostly there where problems that the font files wont be found. What I did so far was the suggestion to add the followig to the htaccess even I placed the font files directly to the root which even does not solve the problem so later I moved the font files back to the fonts folder…

    Like I say, the font files are loaded but the webfont is not applied to the class symbols. In any other browser it works perfectly I checked this in IE9, Opera, Chrome and Safari.

    .htaccess



    Header set Access-Control-Allow-Origin "*"

    # Webfonts
    AddType application/vnd.ms-fontobject eot
    AddType application/x-font-ttf ttf ttc
    AddType font/opentype otf
    AddType application/x-font-woff woff


    css


    @font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../fonts/websymbols/websymbols-regular-webfont.eot');
    src: url('../fonts/websymbols/websymbols-regular-webfontd41d.eot?#iefix') format('embedded-opentype'),
    url('../fonts/websymbols/websymbols-regular-webfont.woff') format('woff'),
    url('../fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
    url('../fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    .symbol {
    font-family: "WebSymbolsRegular";
    }

    html

    f

    Any ideas?

    # April 27, 2012 at 11:34 am

    Ok I did some investigation again, this is not a firefox or css problem at all I found an article on google facing the same problem. It seems to be a problem of a plugin (damn it even uninstalling / reinstalling firefox cant fix it for me)

    # April 27, 2012 at 1:16 pm

    The only thing that sprang to mind was the cross-domain thing, but if you’re hosting them on the same server it shouldn’t matter.

    What was the plugin that was supposed to be causing the error? Do you have a link to the site so others can check it?

    # April 27, 2012 at 6:48 pm

    Yep I’m hosting the fonts myself.
    Sorry to say I cant remember the link I followed on google but basically someone had a similiar problem with fonts on fonts.com. The support asked if a plugin is installed which let them change the UA String… That was the reason for him. So he completly uninstalled the ua changer (or whatever it was called) and hacked the firefox config setting the ua stuff back.

    For me its still not working something must be wrong with my local installed firefox (config or whatever). I was setting up a VM and tested it from there everything is alright.

    # May 14, 2012 at 12:29 pm

    Hi

    I’m getting a similar problem. My @font-face works on all browsers other than Firefox (12). Previously the font worked fine in Firefox.

    At first I believed it was that otf files were unsupported by Firefox, but they’ve definitely changed something in the latest update that stops it working.

    http://misterjtbarbers.com/ is where it’s suddenly changed. All other browsers seem to work fine as far as I can see. Just Firefox 12.

    Anyone got any ideas?

    # May 31, 2012 at 2:48 am

    use this, its working in FF12.x and IE9/10.x
    Example: http://www.codesix.net/testunit/font.php

    kind regards #Codesix.net

    @font-face {
    font-family: ‘FONT’;
    src: url(‘FONT.eot’);
    src: url(‘FONT.eot?#iefix’) format(‘embedded-opentype’),
    url(‘FONT.woff’) format(‘woff’),
    url(‘FONT.ttf’) format(‘truetype’),
    url(‘FONT.svg#FONT’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    Anonymous
    # June 13, 2012 at 4:37 am

    I had a similiar problem, nothing worked…
    Well, I assumed creating a new profile or doing a reset should work but it doesnt. After some more investigation I looked at the configuration itself “about:config” searched for fonts… Then I noticed something:

    gfx.font_rendering.cleartype.always_use_for_content;true
    gfx.font_rendering.directwrite.enabled;true
    gfx.font_rendering.cleartype.use_for_downloadable_fonts;true

    All values where false instead of true!

    After setting the values to true everything works correctly webfonts are showing up again. Dont asked me what the hell (plugin maybe) set those values to false (I wonder why after resetting the browser they are still false instead of true) but anyways hope it helps

    # September 13, 2012 at 3:42 am

    Hi,
    I’ve created an stackoverflow question with exactly the same problem:
    http://stackoverflow.com/questions/12401593/font-face-does-not-work-on-firefox-works-well-on-others
    Just in case any of the previous commentators figured it out.

    # September 13, 2012 at 4:06 am

    My problem is solved. It was a difference between calling http://domain.com or http://www.domain.com. It was a crossdomain problem after all.
    Dayjo. I’ve tried loading your webpage with the www and it didn’t solve the problem for your website.
    ::puzzled::

    # September 27, 2012 at 7:52 am

    Same problem here (FF 15.0.1):

    showed de correct font;

    did’nt.
    adding !important solved it.

    {
    font-family: ‘myfont’ !important;
    }

    # September 27, 2012 at 9:21 am

    @dickippel Post your code on http://jsfiddle.net

    # November 14, 2012 at 10:15 am

    Found this information very useful i had the same problem myself but managed to solve it.

    The website i had trouble with was

    http://www.terracebarbers.co.uk

    Thanks for the useful information

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

You must be logged in to reply to this topic.

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