Font icons work fine on local but break when on live server?

[JohnAsp]

I’ve been creating HTML font icons on my new site following Chris’s technique in this article
[https://css-tricks.com/html-for-icon-font-usage/](https://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.

[Paulie_D]

Looks to me as though it’s not loading the font “Spodv2”.

It doesn’t seem to be in your font folder.

EDIT: I can see them throwing an error in resource view of Inspector

[JohnAsp]

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?

[chrisburton]

@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.

[chrisburton]

Oh and thanks for using my textured diagonal pattern from Sublte Patterns.

[JohnAsp]

Changed my .htaccess as suggested and it worked! Thanks a mill :-)

Oh and thanks for creating the pattern, it’s really nice. Love the effect I’m getting with a semi transparent element on top of it for the blog border, looks cool!

[Author]

Posts