Fonts on IE 9 / 10…

[Mikhail]

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??

[karlpcrowley]

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

[Mikhail]

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.

[Senff]

IE9 definitely supports text-shadow.

EDIT: uhmmmm no.

[Mikhail]

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.

[Senff]

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

[Mikhail]

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/

[Mikhail]

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??

[Senff]

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

Yup, me and Gene ;)

[Mikhail]

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

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

[Paulie_D]

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.

[Mikhail]

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!

[karlpcrowley]

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

[Mikhail]

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?

[karlpcrowley]

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

The rest of your code as normal....

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

[Author]

Posts