The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #42956

    I’ve been creating HTML font icons on my new site following Chris’s technique in this article
    []( “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,
    ( “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?

    []( “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.


    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


    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?


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


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


    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)
  • The forum ‘CSS’ is closed to new topics and replies.