Where developers come to connect, share, build and be inspired.

5

Firefox @fontface cross domain errors & workarounds

15742 views


Ok so after the last few hours I have been digging and digging because I couldn't understand why my @fontface woff's / ttf's refused to show.

To save everyone the anguish I went through, I thought i'd compile a quick guide on how to get them to work... in most (if not all) situations.

1. I'm working locally and the font won't show up

What you need to do is type about:config Into the address bar, search for security.fileuri.strictoriginpolicy and double click it / disable it. (set it to false)

2. The website is published & I have access to the server

You need to add some code to your .htaccess to ask for additional headers to be sent specifically for font files.

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

This is still not working?

If you are using Microsoft's IIS you need to add some code in the web.config system.webServer block.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

If you need to restrict access to particular domain, make sure you replace the * with the domain.

3. The website is published but I don't have access to the server (ie. Tumblr etc.)

This is where it gets tricky and took the most time (and really the reason I am writing this guide)

Ok what we are going to do is base64 encode your font file as a .woff, embed (for Chrome + Firefox) and then add some IE legacy.

Firstly you need to grab your font file and head to The FontSquirrel @fontface kit generator.

Add your font, and hit the "Expert" radio button

Keep all options as normal but under CSS: hit the Base64 Encode checkbox

Agree to the terms and hit download.

You should be presented with a zip file, the only two files you need are the CSS file (in my case and if you didn't change the options stylesheet.css) and the EOT file.

Open up your CSS file and check out the lines, you should be presented with something like

@font-face {
    font-family: 'fontnameregular';
    src: url('fontname-webfont-webfont.eot');
    }

@font-face {
    font-family: 'fontnameregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAxYABEAAAAAIpQAAQAAAAAAA[truncated]) format('woff'),
         url('fontname-webfont-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

You can chuck this into your code but it won't work, this is where I got frustrated, first thing you need to do is change your base64 encode string

In the example above it starts with

data:application/x-font-woff;charset=utf-8;base64,

Change this to

data:font/woff;base64,

Then (if you like, personally I did) take out the comma at the end of that line and get rid of

url('fontname-webfont-webfont.ttf') format('truetype');

As I found you don't need it, if anyone thinks im wrong please send me a message and ill update the guide.

Now copy and paste the code into your CSS file, copy your EOT file somewhere safe to link to, update the URL and you should be good to go!

Thanks for reading

Comments

  • 736212_10200976756252420_836055407_o

    I know that too well. But I can't find the solution or workaround for this.

    Thanks!

  • Avatar_big

    @emgiezet - it was a lot of tears to get to this point

  • 736212_10200976756252420_836055407_o

    @cub3 thanks a lot i will use it for sure in one production site :)

  • 736212_10200976756252420_836055407_o

    @cub3 I will buy you a beer it works! :)

  • Avatar_big

    @emgiezet - Let me know how you go

  • User-avatar

    Thanks. This helped me. Also, if you use SCSS you can use the mixin to help with this:

    @include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal);
    @include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal);
    

    --source http://stackoverflow.com/questions/10617306/new-bulletproof-font-face-syntax-using-data-uris-in-compass

  • 17a394995d15d777a6296cc33a4b56c8

    Possible gotcha. IE8 limits data uri's to 32 kb. IE9+ limit is 4 gb though.

  • 0_r7izbbpqhq6rhusp-auibzwfec_jeerp-i0fbzdzbxbdva2yywrnjvmnq7igdsvraudqzt0ku2rz

    Will I need to keep the TTF declaration if I want so support Android devices?

Add a comment