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

  • Resolved tradiart

    (@tradiart)


    14 years, 4 months 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: https://bit.ly/cy23Fj with IE, Chrome and Firefox.

    Seems the solution is here:

    https://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!!

    https://www.ads-software.com/extend/plugins/w3-total-cache/

Viewing 5 replies - 16 through 20 (of 20 total)
  • Plugin Contributor Frederick Townes

    (@fredericktownes)

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

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

    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 ??

    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

    @MyrddinDE-

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

    @ 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 https://httpd.apache.org/docs/1.3/mod/mod_mime.html#addtype).

    James

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