Shut up. I'm talking.

I got the following question recently and have been meaning to blog about the answer:

Q: Why does @font-face work correctly in Chrome and Safari but when I open my site in Firefox they do not work at all?

A: The reason @font-face doesn’t display correctly in Firefox is because they block any fonts which are being called from a separate server or domain.

For example, if you host your fonts on mysite.com but your website is yoursite.com then Firefox picks up the different domains and blocks the @font-face from displaying.

However, if you host your fonts on yoursite.com and your website is yoursite.com then it is all good.

There is a work around though, go to www.fontsquirrel.com and use their @font-face generator, select “Expert” and then tick on “Base64 Encoding”. This will embed the font into a stylesheet and will therefore work on all modern browsers.

I hope that makes sense!