Grow your CSS skills. Land your dream job.

Icon Fonts Implementation (with Pen)

  • # February 21, 2013 at 8:25 pm

    I’m trying out icon fonts for the first time, I’ve got a sample working on my first pen, but it doesn’t appear to be working in Firefox 18 or Safari. Firefox isn’t rendering the font logos, and Safari gives a dreaded “white screen”.

    Checking the Inspector, it looks like the assets are loaded properly, and the font is recognized, yet the icons are not actually being rendered. Any hints?

    http://codepen.io/sloveland/pen/uHxcD

    # February 21, 2013 at 11:30 pm

    Safari appears to be working fine now, it might have been my server. Still having the problem in Firefox though. I’ve tested on a few mobile devices and they seem to be working.

    # February 21, 2013 at 11:37 pm

    Firefox doesn’t allow cross domain support of icon fonts

    http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default

    That’s just my _guess_

    # February 21, 2013 at 11:41 pm

    Mmk, that makes sense.

    Theoretically, the fonts should work once I actually implement this all on my site.

    @ChrisP Thanks for the help troubleshooting!

    # February 21, 2013 at 11:47 pm

    Doesn’t hurt to add this to your .htaccess for when you implement it on your site as well:

    # BEGIN @font-face fix for FF



    Header set Access-Control-Allow-Origin “*”

    # END @font-face fix for FF%

    credit to @JoshBlackwood, who pointed out the fix here, http://css-tricks.com/forums/discussion/comment/93173/#Comment_93173

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

You must be logged in to reply to this topic.

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