Firefox, custom Webfonts and CDN issues

In Webserver by Myrddin2 Comments

This one took me a while to figure out. On my main site myrddin.de I am using a Content Delivery Network (CDN) to deliver files from different domains and speed up page loading times.

With the new design I am using a custom font and it displayed properly up till I activated said CDN. All Browsers but Firefox continued to properly display the Font and ofc I thought at first that it was my own fault.

Solution

Firefox does not display fonts if they are displayed from a different domain than the one the Page is delivered from. The solution is add Access-Control-Allow-Origin to your apache config and thus allow these domains for Firefox. Now the site hosted at www.myrddin.de can load additional fonts from its CDN static.myrddin.de and media.myrddin.de.

<FilesMatch ".(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*.myrddin.de"
# Header add Access-Control-Allow-Origin "test.domain2.de" # if you want to add multiple domains
</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 then you need to add the Webfont to your 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 */
}

And now you can use the font to display properly by using

.myrddin-postcontent h1 {
font-family: "Copperplate Gothic Light",Arial, Helvetica, Sans-Serif;
font-weight: normal;
}

To convert your Font into the above mentioned formats you can use the free service of Font Squirrel.

Hope that helps you save a lot of time searching, I wasted almost 5 hours on this 😀 The Font issues totally bugged me, had to understand why it wasn’t working after activating W3 Total Cache and the CDN.

You can the font in action here.

Comments

  1. hi, can you help me please, where do i put this:

    Header set Access-Control-Allow-Origin “*.myrddin.de”
    # Header add Access-Control-Allow-Origin “test.domain2.de” # if you want to add multiple domains

    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

    in the file .htaccess?? or where?
    thanks for the help

    1. Author

      I have created a file /etc/httpd/conf.d/webfonts.conf with the contents above, not sure if it works in .htaccess

Leave a Comment