Font icons work fine on local but break when on live server?
# February 25, 2013 at 8:00 am
I’ve been creating HTML font icons on my new site following Chris’s technique in this article
[http://css-tricks.com/html-for-icon-font-usage/](http://css-tricks.com/html-for-icon-font-usage/ “HTML for icon usage”)
All this works fine is looking just how I want it to look when working on my Dev server on my PC,
(http://seasiderspodcast.co.uk/spv2/images/icons.jpg “see screenshot here”)
However, when I FTP it onto my live server the font all look totally different and seem to take a while to load after the page has loaded – anyone any idea of what’s going on here?
[http://seasiderspodcast.co.uk/spv2/](http://seasiderspodcast.co.uk/spv2/ “All font icons are different on live?”)
I have put the entire site from local to live so all the files are on live so I don’t understand this. I’ve also cleared my browser cache in case.# February 25, 2013 at 9:11 am
They are defo on the server, I’m looking at my FTP listing now.
It does however appear to be a problem with the font files, like you say. I checked out the resources view on local server and I see the font file named spodv2.woff in fonts folder. When you select it my icon fonts appear OK in the preview pane.
When I do the same in resources view on the live version, there is a red circle with a ‘1’ to the right of spodv2.woff. When I click on this I dont see the font icons in the preview pane (as I did on local), just regular qwerty characters. Is it because my server doesn’t know how to serve .woff files?# February 25, 2013 at 9:23 am
@jaspinal You might need to establish a MIME type for woff as some servers (more notably, IIS) will not recognize them. So in your htaccess file put this (just to be safe we’ll add more):
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType application/x-font-woff woff
AddType font/opentype otf
Also, depending on your server, fonts won’t load if they are from an external domain but since you stated they are, this doesn’t apply to you.
You must be logged in to reply to this topic.