Google Web Fonts not showing properly on IE9
I am using Google Web Fonts. All browsers are rendering the font properly except IE9. (I haven't tested on earlier versions of IE).
Here is the difference: IE 9 vs. Google Chrome
HTML:
<head>
<link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
Google Fonts file contents:
@font-face {
font-family: 'Yeseva One';
font-style: normal;
font-weight: 400;
src: local('Yeseva One'),
local('YesevaOne'),
url(http://themes.googleusercontent.com/static/fonts/yesevaone/v6/wVgDKaRrT3DN9VGcOY4orxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
CSS:
.sf-menu li {
float:left;
position:relative;
text-align:center;
font-family:'Yeseva One',cursive;
font-size:17px;
line-height: 64px;
border-bottom:1px solid #4A4A4A;
}
What should I do?
Answer
There is still insufficient information about the situation, but it seems that you are testing the page locally on IE 9. In that case, if you look at the developer tools (F12), part Console, you will see a CSS3317 error message. It says that @font-face failed due to cross site access restrictions.
This happens on IE 9 only in “Standards Mode”, but that’s what you get when using a meta tag as in your code.
The problem is just a developer’s nuisance (unless you are creating an HTML application that is supposed to run on users’ systems locally, as a downloaded application – in that case, include the font files in the application package). When you upload the files on an HTTP server and test from there, the problem does not appear.
Added: Demo which works OK on IE 9 even in standards mode, but if you download it and open it locally on IE 9, it fails (you see the fallback font, Courier); and then, in developer tools, if you set Document Mode to Quirks, it works again. – Google recommends that you use the fonts as hosted by Google, but it also provides downloads and has very permissive rules of use. However, the download links normally give you just a TTF file (as zipped), so you need to use services like FontSquirrel to generate the other formats.