Grow your CSS skills. Land your dream job.

Fonts on IE 9 / 10…

  • # March 8, 2012 at 6:45 am

    Hi there, does anyone know if there are Google fonts that work in IE9, (I really like “Pinyon Script” but that won’t seem to work in IE9)? Or is there a workaround for that one or other Google fonts for IE9? I’m guessing/hoping (!), IE10 will allow google fonts??

    # March 8, 2012 at 6:50 am

    Hi Mikhail, Can you double check that you are loading the font properly? I’ve tested this on IE8 and IE9 and it works fine
    http://www.google.com/webfonts/specimen/Pinyon+Script

    # March 8, 2012 at 7:26 am

    Oh, good to hear that it should work on IE, I just copied the link href… etc… type=”text/css”/> into the head, and then call it in my main css file, with an id:…. #idname {font-family: “Pinyon Script”, cursive;…

    I assumed it won’t run in IE9 because it works for me in Firefox, Chrome, Safari, and Opera… but not IE9!

    Incidentally, I also don’t have text shadow working in IE9, I guess it doesn’t work there?! I’m just using text-shadow:… in css.

    # March 8, 2012 at 7:58 am

    IE9 definitely supports text-shadow.

    EDIT: uhmmmm no.

    # March 8, 2012 at 8:06 am

    I have to find out what’s going wrong then! I also have a css transition to the color of some font where the font is an anchor, you hover and it changes color at a defined speed, this doesn’t work in IE9 does it?

    I am simply using text-shadow property in css, any idea what I might be doing wrong? I have it working in FF, Opera, Chrome, and Safari, but not IE9.

    # March 8, 2012 at 8:09 am

    Classic reply: can you show us your site where it goes wrong? :)

    # March 8, 2012 at 8:14 am

    I’d love to, it’s not live yet!! I just googled it and entry after entry is saying that IE9 does not support text shadow, but there is a jQuery workaround maybe?

    http://www.impressivewebs.com/css3-text-shadow-in-internet-explorer/

    # March 8, 2012 at 8:19 am

    This is the part of my css that gives the font the text shadow and also Pinyon Script, neither is working for me in IE9, but in all the other browsers all good.

    #domainname {font-family: "Pinyon Script", cursive;
    font-size: 86px;
    font-weight: 500;
    text-shadow: 0px 0px 16px #fff;
    color: ##00bfff;
    font-style:normal;
    text-align: center;
    margin: 5px;
    padding: 69px 189px 68px 20px;}

    // and in the head:

    // just copied from google fonts site

    Is that you and Gene Simmons by the way??

    # March 8, 2012 at 8:29 am

    My mistake, IE9 doesn’t support text-shadow indeed. Sorry about that!

    Yup, me and Gene ;)

    # March 8, 2012 at 8:32 am

    There may be a jQuery workaround, and hopefully IE10 will support it.

    I hope that tongue didn’t get too close to you!!

    # March 8, 2012 at 9:55 am

    If it’s still not working, you might want to change

    #domainname {font-family: "Pinyon Script", cursive;

    to

    #domainname {font-family: 'Pinyon Script', cursive;

    Single quotes FTW.

    # March 8, 2012 at 9:05 pm

    Thanks, I’ve tried the single quotes, still no luck, and I’ve tried about 14 different Google fonts because I read that some work, some don’t, no luck with any of them for me!! All the fonts I’ve tried are fancy curly ones, like ‘Pinyon Script’, ‘Italianno’, ‘Parisienne’, etc…

    Hey karlpcrowley, are you able to shed some light on this? It obviously works on IE9, that’s my default, so I first saw it on IE9!

    Regards,
    Michael

    ps, one thing I have learnt is that I do not like IE9!

    # March 9, 2012 at 1:17 am

    Press f12 within IE to open up the dev tools
    Ensure that browser mode and document mode are set to IE9

    # March 9, 2012 at 3:39 am

    Thanks Karl, I’ll take a look at that, I am spending way too long on fonts, I’ve just set up a fallback that works for IE9…

    Is there a way ( I’m guessing there is!) to specify a fallback font-size as well as fallback font, ie for example call 84px Pinyon as a first pref. then call 76px Times New Roman, where the size and font family go together in the preferences?

    # March 9, 2012 at 3:44 am

    I think it may be possible with JavaScript but not with CSS
    Also you should probably fall back to a similar looking cursive font
    Maybe

    "Pinyon Script", "Apple Chancery", "Zapf Chancery", "Monotype Corsiva", Georgia, cursive;

    Try starting your document like this

    < !doctype html>



    The rest of your code as normal....

    PS I’m almost 100% certain its just a setting with your browser

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.

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