Firefox, custom Webfonts and CDN issues

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.