treehouse : what would you like to learn today?
Web Design Web Development iOS Development

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

  • 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/

    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/

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

  • 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!