Grow your CSS skills. Land your dream job.

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 8:11 am

    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

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

    # February 25, 2013 at 9:58 am

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

    # February 25, 2013 at 10:15 am

    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!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".