Thread:Mathmagician/@comment-4795804-20131209222328/@comment-4674838-20131212051546

By specification, web fonts are ordinarily subject to domain restrictions, which means that web fonts won't work on your webpage unless the font file is on the same domain as the webpage that uses it. Notably, Chrome actually fails to meet this specification and in fact that example works in Chrome just fine. However, it won't work in other browsers like Firefox or IE because of the domain restrictions.

The way to get around these domain restrictions is a CORS configuration, for example, http://davidwalsh.name/cdn-fonts. This is something that has to be done on the web server where the font file is located. So unless you have administrative access to a web server where you're hosting your own fonts and your own website, this isn't something you can do.

The idea here is that the example on developer.mozilla.org is for educational purposes, it's not actually meant for people to import it and use it on their website. Google Web Fonts, by contrast, is a production system specifically designed (they have CORS configurations on their web servers to allow cross-domain access) for users to import their web fonts. Their links also generate appropriate CSS code for different web browsers. Try copy/pasting http://fonts.googleapis.com/css?family=Exo+2 into your address bar in some different web browsers. You may notice that the code you get from that link is different in different browsers.