css - Font Face issues in Internet Explorer 8 -
i created test page ie 8 see if use google fonts. can find code @ end of question.
i including every google font need using element list of them.
now, depending on href attribute length in element, google fonts might not work in ie 8.
here cases:
if have:
<link rel=stylesheet type="text/css" href="//fonts.googleapis.com/css?family=tangerine|open+sans|droid+sans|pt+sans|josefin+slab|arvo|lato" />
google fonts not work in ie 8.
now, if remove "lato", last font specified:
<link rel=stylesheet type="text/css" href="//fonts.googleapis.com/css?family=tangerine|open+sans|droid+sans|pt+sans|josefin+slab|arvo" />
google fonts work in ie 8.
they work in chrome in both cases, ie 8 related only.
html code test page:
<html> <head> <link rel=stylesheet type="text/css" href="//fonts.googleapis.com/css?family=tangerine|open+sans|droid+sans|pt+sans|josefin+slab|arvo|lato" /> <style> div { font-size: 36px; font-family: 'tangerine'; /* here google font */ } </style> </head> <body> <div>this div google font family</div> </body> </html>
yes it's issue ie - ie8 , below - 1 solution separate out links each font in conditional statement - doesn't long font stack trace in link attribute.
<!--[if lte ie 8]> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=tangerine" /> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=open+sans" /> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=droid+sans" /> <![endif]-->
Comments
Post a Comment