5

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?

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
Ramin Omrani
  • 3,673
  • 8
  • 34
  • 60
  • here is the code:http://pastebin.ca/2293999 – Ramin Omrani Dec 16 '12 at 08:27
  • @bobthyasian : and end up losing a lot of users? Normally, a website should be cross-browser compatible, and atleast for new versions of popular browsers – Pranav 웃 Dec 16 '12 at 08:36
  • @PranavKapoor It was more/less a joke. But still, I discourage everyone I can from using IE. Firefox or Chrome is usually better. Although IE9 is 'OK' but if it was great it wouldn't need a button at the top for 'compatibility' – bobthyasian Dec 16 '12 at 08:40
  • can you reupload your screenshots? – Jules Colle Sep 18 '19 at 09:32

1 Answers1

4

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • If you can put up a demo where we can look at it, I might be eating crow, because that does sound familiar (and is IE9 considered a modern browser?). Maybe I should have first gone back and read my own answer. Ehh. Although, there is some good stuff in there... `:P` And on another note, can you download and serve Google Font files? – Jared Farrish Dec 16 '12 at 08:56