Web font not working properly


I have used a free web template:

Demo: http://webdesigneraid.com/html5/site-01/

The big bold fonts on that look great - this is how it looks for me in Firefox 15 when viewing the demo site:

But on my version of the same template, which works 100% fine on my local PC, looks wrong when online:

This screenshot shows what it looks like for me:

For some reason the web fonts are not working, even though they work fine on my local machine, and also on the demo version of the original template.

I wondered if anyone might be able to advise re. where I have gone wrong.

Any advice much appreciated.


Looking at the SOURCE of your online version I can see that the CSS references fonts in a folder that I bet you do not have uploaded on your site.

src: url('../fonts/League_Gothic-webfont.eot');
	src: local('☺'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfont1Lb5Pdit') format('svg');

Remember that those paths are relative to your css file, too.

Also, because these references are relative, the location of your site (e.g. draft/v1) probably has changed this.

Thanks - I copied the files from the fonts folder to the v1 folder, and that has fixed it.
Thanks for your help