Font-Face Not Working in Firefox

I recently started using MaxCDN as a content delivery network for my site. Did you notice the speed boost?

Anyway, when I switched, I also minified my CSS. Everything was super until I tested in FF (previously had no issues) and noticed my font-face not working in Firefox, which is a major issue.

So I tooled around StackOverflow for a few minutes and came across a couple different options, the first of which told me it was about the local source, which seemed reasonable, so I tossed it into my stylesheet.

@font-face {
    font-family: 'PortFont';
    src: url('bebasneue-webfont.eot');
    src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebasneue-webfont.woff') format('woff'),
         url('bebasneue-webfont.ttf') format('truetype'),
         url('bebasneue-webfont.svg#BebasNeueRegular') format('svg');
    src: local('PortFont'), url('bebasneue-webfont.ttf'); /* this part right here */ 
    font-weight: normal;
    font-style: normal;
}

Bad news bears, it didn’t work. So toss out that little giblet of code and let’s move on. I thought the answer would be in my CSS, but my problem was solved through .htaccess. I found this Stack Overflow thread and popped in the code.

# BEGIN REQUIRED FOR WEBFONTS

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


    
        Header set Access-Control-Allow-Origin "*"
    


# END REQUIRED FOR WEBFONTS

Worked perfectly. Now all of my fonts show up correctly and I am a happy man. If you’d like to learn more about my content delivery setup, let me know and I can make a post about MaxCDN. Until then, check out this post about MaxCDN and WordPress by Dave Donaldson at Max Foundry.

Hopefully that small fix helped at least one of you and if not, let me know what other resources you used to fix your problem.

The post Font-Face Not Working in Firefox appeared first on John B. Hartley.