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.

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Eric Mueller
7 years ago

This did the trick for me perfectly. Thanks!

Grace
Grace
7 years ago

Worked for me, Thanks!

Mladen Gradev
6 years ago

Thank you, worked for me too 🙂

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

3
0
Would love your thoughts, please comment.x
()
x