WordPress.org

Ready to get started?Download WordPress

Forums

W3 Total Cache
[resolved] Font-face not working in Firefox (21 posts)

  1. tradiart
    Member
    Posted 4 years ago #

    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/

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

  3. Frederick Townes
    Member
    Plugin Author

    Posted 4 years ago #

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

  4. tradiart
    Member
    Posted 4 years ago #

    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!

  5. Frederick Townes
    Member
    Plugin Author

    Posted 4 years ago #

    I see, thanks.

  6. munim2020
    Member
    Posted 3 years ago #

    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

  7. Frederick Townes
    Member
    Plugin Author

    Posted 3 years ago #

    Ok, keep us posted.

  8. Chrisdigital
    Member
    Posted 3 years ago #

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

  9. Frederick Townes
    Member
    Plugin Author

    Posted 3 years ago #

    Very helpful info.

  10. rnailer
    Member
    Posted 3 years ago #

    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

  11. Tunghsiao Liu
    Member
    Posted 3 years ago #

    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.

  12. Frederick Townes
    Member
    Plugin Author

    Posted 3 years ago #

    A great tip!

  13. ritzgirl
    Member
    Posted 3 years ago #

    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

  14. ritzgirl
    Member
    Posted 3 years ago #

  15. Vid Luther
    Member
    Posted 3 years ago #

    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/

  16. ritzgirl
    Member
    Posted 3 years ago #

    @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);
    }

  17. Frederick Townes
    Member
    Plugin Author

    Posted 3 years ago #

    @zippykid, I investigated this today and will likely find a solution.

  18. MyrddinDE
    Member
    Posted 3 years ago #

    Great advices here, thanks, I'd prefer a solution implemented though. How is that working out so far?

  19. MyrddinDE
    Member
    Posted 3 years ago #

    Hah, got it working by changing the apache config:

    <FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
      <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*.myrddin.de"
      </IfModule>
    </FilesMatch>
    
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
    AddType application/vnd.ms-fontobject eot
    AddType font/truetype ttf
    AddType font/opentype otf
    AddType application/x-font-woff woff

    And using the following CSS

    @font-face {
        font-family: 'Copperplate Gothic Light';
    	src: url('font-webfont.eot'); /* IE9 Compat Modes */
    	src: url('font-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
    	     url('font-webfont.woff') format('woff'), /* Modern Browsers */
    	     url('font-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    	     url('font-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

    Hope that helps people a lot of time searching, spent almsot 5 hours on this :D

    To convert your truetype font into the abov ementioned formats I have used Font Squirrel

    And you can see it here in action (reworking sections atm, hence the sidebar is "empty"). The font issues just bugged me, had to understand why it wasn't working after activating W3TC with a CDN

    kind regards,

    Michael

  20. robfaraj
    Member
    Posted 3 years ago #

    @MyrddinDE-

    Great reply. Can you explain why you included font.css in your FilesMatch? Is that necessary? Cheers.

  21. James Collins
    Member
    Posted 3 years ago #

    @ MyrddinDE

    For the AddType directives, I thought you needed to include a dot before the file extension?

    eg:

    AddType application/vnd.ms-fontobject .eot
    AddType font/truetype .ttf
    AddType font/opentype .otf
    AddType application/x-font-woff .woff

    (see the example on http://httpd.apache.org/docs/1.3/mod/mod_mime.html#addtype).

    James

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic