video-js custom font not working in Firefox

Question

Have a look here with Firefox (I've got 22.0):

http://www.jamhouse.com.au/

You'll see that the video-js custom font isn't working. Works fine in Chrome.

Any ideas would be greatly appreciated!

Watto :)

Answer 1

Firefox has an extremely tight Cross-Domain policy. This includes sub-domains of your site (even www).

In your css you reference the fonts with http://jamhouse.com.au/templates/gk_fest/js/html5/font/vjs.XYZ (notice no www.) while on the link you posted it is http://www.jamhouse.com.au If you goto just http://jamhouse.com.au your fonts work.

You have a few options:

Recommended for true cross domain

Either set up an Access-Control-Allow-Origin in your .htaccess or httpd.con

For Apache: http://davidwalsh.name/cdn-fonts

For IIS: http://deserialized.com/iis/serving-web-fonts-cross-domain-with-iis/

-- OR --

Recommended for your case

you can reference the fonts relatively with url(font/vjs.XYZ)... as this will use whichever domain/sub-domain you are on (www or non-www)

-- OR --

You can enforce either http://www.jamhouse.com.au or http://jamhouse.com.au and reference the fonts with whichever way you choose.

For Apache: http://www.thesitewizard.com/apache/redirect-domain-www-subdomain.shtml

For IIS: http://forums.iis.net/t/1154053.aspx/1

-- OR --

You can embed the fonts directly in the css (which I've opted for my video.js installations)

Embedding fonts in css - http://blog.patdavid.net/2012/08/embedding-fonts-with-css-and-base64.html

Under expert mode you can choose base64 Encoded. http://www.fontsquirrel.com/tools/webfont-generator (I had limited success with their encoding, the play triangle (\e001) was not showing up.)

Encoding files in base64 http://www.motobit.com/util/base64-decoder-encoder.asp (make sure the output is all on one line with

Answer 2

I've spent the last 2 hours resolving your issue haha. Ok I've managed to get it working. The problem is in your http://jamhouse.com.au/templates/gk_fest/js/html5/video-js.css

You link to the fonts via the full path url, but there must be some sort of security thing in place where only Chrome allows it. If you use the relative url to the fonts they will appear. I've just tried this now by saving your page locally and altering the font links in the css and now it works. Give that a try.