WordPress.org

Support

Support » Plugins and Hacks » W3 Total Cache » [Resolved] [Plugin: W3 Total Cache] Font-face not working in Firefox

[Resolved] [Plugin: W3 Total Cache] Font-face not working in Firefox

  • Hello!

    I’m using W3 Total Cache with no issues, except for font-face fonts I’m embedding in CSS code.

    In Firefox, fonts are not showing correctly. Please see this page: http://bit.ly/cy23Fj with IE, Chrome and Firefox.

    Seems the solution is here:

    http://webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox

    Firefox supports TrueType fonts (.ttf) as well as OpenType fonts with TrueType (.ttf) or PostScript (.otf) outlines.
    Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.

    No further explanation.

    I have addedd this code to my htaccess file:

    # example Apache .htaccess file to add access control header
    <FilesMatch "\.(ttf|otf)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
    </FilesMatch>

    No positive result.

    When I deactivate the plugin, as the fonts are again called from the same domain, the result is ok.

    I’m completely lost with this… and websites look horrible without the font.

    Any idea of how can I solve this?

    Thank you!!

    http://wordpress.org/extend/plugins/w3-total-cache/

Viewing 15 replies - 1 through 15 (of 20 total)
  • Firefox supports the .woff format. You can upload your fonts to Font Squirrel and it will generate a css stack and the right font formats to work in all browsers.

    I use TypeFront which is like a CDN just for fonts. You upload your ttf or otf font and it generates the css for you to serve fonts from their servers. It’s only $5 a month and works great with W3 Total Cache.

    Plugin Author Frederick Townes

    @fredericktownes

    @tradiart do you have .ttf and .otf files specified in the “Theme file types to upload” fields of the CDN tab? If not, be sure to add those and export theme files to CDN again.

    Thank you both for answers.

    @fredericktownes Notice that fonts show correct in IE and Chrome. All files are uploaded to CDN. Also in W3 total cache cdn config I have entered all extensions of my fonts. The problem is with the browser. I decided to post here in case somebody else noticed the same.

    @c3mdigital I already used Font Squirrel to generate code and font files. I have followed your suggestion and used TypeFront and although it has taken more than a day to work, now fonts are correctly displayed in Firefox.

    I hope this will be solved in future Firefox updates. Using so much different services is really confusing and not practical.

    Thank you again!

    Plugin Author Frederick Townes

    @fredericktownes

    I see, thanks.

    Wow. Even my boss thought I was nuts when I mentioned this problem to him.

    I did a bit of research and as it seems, firefox doesn’t allow you to load fonts from another domain (or even if you provide a full path in the css file).
    I doubt if firefox will resolve this “problem” in future updates, as its a security feature. Only sites which have access to the resource will be able to access the font file, specified by the Access-Control-Allow-Origin directive.

    Now, our problem is that we are hosting our font files on a CDN (amazon here), and the domain is different from site.

    And .htaccess won’t work to add headers to the response from amazon s3.

    Solution: I have nothing yet, but I am thinking of pulling the font files off the CDN

    Plugin Author Frederick Townes

    @fredericktownes

    Ok, keep us posted.

    @munim2020 I wrestled with this for about 2 and half weeks on my own – reading up on this issue (very few people are talking about this in terms of deploying from a CDN), and tried two different CDN products (Rackspace cloudfiles and Voxel VoxCast.)

    One very important thing is you need to use a CDN product that allows you to manually customize Apache mod_header directives or uses the directives from the origin server when it fetches the files it’s mirroring on the remote hosting network. (This is a cool feature because you have only one place to check for errors.)

    Recently, I went back and forth with all their tech support departments and finally it came down to 4 or 5 things…The last guy broke it down like this…

    All of these things can go wrong:

    1. How Firefox was dealing with Expires headers while you’re during your fixes (holding on to old data)

    2. Time to live (TTL) for the data on the CDN (your CDN is holding on to old data) Even if you upload new data to the CDN depending on how it works you still have to wait until the old data expires to see the new data propagate properly across the entire CDN node network)

    3. Some misconfiguration of the .htaccess files or http.conf (I had a mixture of dos and apache formatting on some of my directives, my host support staff helped me clean up my file – this was breaking the CSS reference/permissions to the font files in firefox.)

    4. Making sure files paths are correct and that origin and remote host see each other (you can check this in firebug)

    5. Also if you throw cnames in the mix, you could be dealing with DNS propagation issues.

    We also did a minor incremental update to PHP for good measure.

    Needless to say this can test your patience. If all of these things are out of sync, NO fonts for you. I seem to be up and running now.

    Good luck finding your answers.

    Plugin Author Frederick Townes

    @fredericktownes

    Very helpful info.

    just use absolute paths in the @font-face css to the font files hosted on your own domain, you can use http://www.fontsquirrel.com/fontface/generator to gnerate all necessary fonts thus avoiding having to access fonts externally via CDN or other services which will throw up issues with firefox

    I have a solution that works but not perfect. That is you can encode your fonts into base64 in a single .css files. just like:

    url("data:font/opentype;base64,ABCDE) format('opentype'),

    It works for Firefox loading font-face fonts from cross domain.

    It’s better to cache that file such as setting a further expire header and using gzip compression.

    Plugin Author Frederick Townes

    @fredericktownes

    A great tip!

    ritzgirl

    @ritzgirl

    this finally worked – I couldn’t get any difference from using relative links in firefox – I found this code on someone’s site, but don’t have the link sorry – but it does work. I use a number of different fontfaces from this same neue family all generated at font squirrel – so I needed to replicate this snippet for each one.

    fyi when I was using php pages without wordpress the absoulute link worked fine for firefox.

    anyway,

    @font-face { /* for non-IE */
    font-family:HelveticaNeueLT25UltLightRegu;
    src:url(http://:/) format(“No-IE-404”),url(neue/helvetica_lt_25_ultra_light-webfont.ttf) format(“truetype”);
    }

    I’ve actually only tested this in the latest ff, chrome and ie – haven’t even installed safari / opera yet – just got a new puter last week at the same time I was changing over to wp. cheers, hope this works for someone,. B

    ritzgirl

    @ritzgirl

    ritzgirl and Frederick.. this may be something we need to add into w3-total-cache, or the faq for it?

    http://zippykid.com/blog/2010/12/using-font-face-with-a-cdn-and-firefox/

    ritzgirl

    @ritzgirl

    @zippykid

    I don’t know anything aboot that, but it’s prolly good to spread the word. Also for anyyone interested here’s some sample ie code:

    @font-face{ /* for IE */
    font-family:HelveticaNeueLT35ThinRegular;
    src:url(neue/helvetica_lt_35_thin-webfont.eot);
    }

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] [Plugin: W3 Total Cache] Font-face not working in Firefox’ is closed to new replies.
Skip to toolbar