Magento Go Fonts Assets not loading in IE9-10 and Firefox [closed]

Question

I'm working on a Magento Go site at the moment. I purchased a web font from Font Spring and uploaded the 4 font files (eot, woff, ttf and svg) via the admin system using the Font Assets tool.

When I insert the fonts the following css code is added to my custom css:

../css_editor_fonts/ProximaNova-Sbold-webfont.eot
../css_editor_fonts/ProximaNova-Sbold-webfont.ttf
../css_editor_fonts/ProximaNova-Sbold-webfont.woff
../css_editor_fonts/ProximaNova-Sbold-webfont.svg

I've then applied those relative paths to the correct cross-browser compatible @font-face declaration, see below:

@font-face {
    font-family: 'proxima_nova_ltsemibold';
    src: url('../css_editor_fonts/ProximaNova-Sbold-webfont.eot');
    src: url('../css_editor_fonts/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.woff') format('woff'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.ttf') format('truetype'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

The font is referenced in my custom css like so:

font-family: 'proxima_nova_ltsemibold';

This works in IE7/8 and latest Chrome, but not in IE 9/10 or Firefox.

I think the reason the font isn't working in IE9/10 and Firefox is due to a cross-origin request which is something I've seen discussed quite a lot, and my IE console contains this error:

@font-face failed cross-origin request. Resource access is restricted.

There is an edit that can be made to an htaccess file to enable the fonts to work in those browsers - its called Access-Control-Allow-Origin from what I've read.

Does anybody know if you can update or create an htaccess file for Magento Go?

Cheers.

Answer 1

I haven’t been able to get uploaded font files to be served to all browsers, but I have managed to get a font served using http://fontdeck.com/. Which font serving service you use is irrelevant, but I have been able to successful use one.

I spoke with a member of the Magento Go support team (via live chat) and explained the issues I was having with uploaded font files not being served in various browsers due to cross-origin requests. I explained the htaccess solution to enable the serving of fonts and their response was roughly along the lines of “our servers don’t support custom htaccess files”.

I attempted using absolute paths for the src properties of the @font-face rule, but I think Magento Go adds these to your custom CSS anyway as it appears to be processed from the theme editor and linked into the templates.

Edit: I forgot to mention that I also tried to base64 encode the font files into the css using the Font Squirrel Web Font Generator (http://www.fontsquirrel.com/tools/webfont-generator). I uploaded my purchased files, enabled the necessary advanced settings, downloaded the css with the encoded font (think it was just woff that was encoded), uploaded that css to my theme...and then Magento Go applied the same absolute path to the src property breaking the encoded font becase it had a random url in front of it.

I’ve raised a support ticket with Magento Go explaining the issues and asked what they intend to do to enable uploaded font files to be served to all browsers. I’m hoping it gets raised to a feature request or something similar.

For now, it will have to be a font serving service. I used the Javascript embedding code from Font Deck. I placed the provided js in a Static Block and then added that block to all pages using a Front End App. You can use the html link embedding method from Font Deck, but it has to be added to the header before any script tags which isn’t possible using Magento Go’s theme editor.

Hope this can help someone out out in the short term. Long term, I hope Magento Go find a solution to this issues.

Answer 2

Please try using absolute full paths (with https/http) for the fonts instead of relative paths.