Web Fonts from cross-domain can cause problems in IE9 and Firefox
Jul 24, 2012
Suresh Vasudev
2 minute read

Last week we are deploying a locomotiveCMS site in Heroku. Before deploying we build the site themes locally based on client request. They recommended some web fonts which were working fine in IE9, Firefox-13 and Chrome-20 when tested against the local server.

However these fonts are not getting displayed when accessing it from Heroku.

The web fonts used in the site are LeagueGothicRegular, ProximaNovaRgRegular and ProximaNovaRgBold.

A web font is a specially tuned font for use on websites using the CSS @font-face declaration.

We initially thought it was an issue with the font files and so recreated it from Font Squirrel (http://www.fontsquirrel.com/). However there was NO luck. On subsequent testing it is noticed that these fonts are working correctly in IE8.

Later our thoughts went to understand the logic of fonts getting displayed correctly from local server.

In Heroku deployment all the fonts are kept in S3, which is an external domain. That is the only difference between local and Heroku deployment. So we decided to move all the font files to a public directory of locomotiveCMS within Heroku instead of S3. The CSS in S3 is then modified to refer the fonts to the application location, with fully qualified URL, instead of S3. After this change the fonts started displaying correctly in all browsers.


@font-face {

font-family: 'ProximaNovaRgRegular';

src:url('http://testapp.herokuapp.com/fonts/proximanova-reg-webfont.eot');

src:url('http:// testapp.herokuapp.com/fonts/proximanova-reg-webfont.eot?#iefix') format('embedded-opentype'),

url('http:// testapp.herokuapp.com/fonts/proximanova-reg-webfont.woff') format('woff'),

url('http:// testapp.herokuapp.com/fonts/proximanova-reg-webfont.ttf') format('truetype'),

url('http:// testapp.herokuapp.com/fonts/proximanova-reg-webfont.svg#ProximaNovaRgRegular') format('svg');

font-weight: normal;

font-style: normal;

}

So our finding is cross domain is an issue with certain browsers in loading web fonts. May be there will be configurations that can be done at server side to handle this. However in a PaaS cloud environment I am not sure how to handle this other than bringing the fonts to the local environment.