Css @font-face not working in ie9

internet-explorer css internet-explorer-9 webfonts

18,675

Solution 1

You need to add the format .eot in order to be recognized by IE9.

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

source

Solution 2

You should look at Squirrel

It let you convert a font that you upload with the right codes etcetc.. Works great!

Aswell put ?#iefix behind the second src: url, see this link for a right code: Question from "kraftwer1"

Solution 3

Just serve the font from Google Fonts - click 'Open in Google Fonts' in the top right of that page, select your options, and copy/paste the generated output at the end. Saves you bandwidth and headaches, it'll just work.

To just use the Regular size, c/p this in the <head> of your page:

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Or from your CSS files:

@import url(http://fonts.googleapis.com/css?family=Roboto);

Or load it at runtime with Javascript:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

18,675

Author by

Chris

I'm a Software Developer from Germany. I have about 10 years of experience in software development. My key Topics are Java, JavaScript and Android.

Updated on June 04, 2022

Comments

Chris almost 2 years
I managed to use a custom font which works in every browser that deserves to be called "browser". Well as always the cool things do not apply to ie (in this case ie9).

I tried the following:
```
@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');}
```
after some hints i found on this on google i tried:
```
@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');
                              src: url('../fonts/roboto/Roboto-Regular.ttf#') format('truetype');
                              font-weight: normal;
                              font-style: normal;}
```
still with no success. Well as i know by experience there will be no "good" solution for this problem but maybe someone found another bad ie hack that gets me out of another ie misery.
Chris almost 11 years

The application will run in intranets with no warranty that there is an internet connection so i'll have to host them myself.
Niels Keurentjes almost 11 years

@Chris in that case just download their CSS and its related files - it works in all browsers since IE6 :) Do make sure your webserver passes the correct Content-type for the fonts if you mirror them - some browsers are known to crap out if they're not exactly correct.
Chris almost 11 years

Is there an easy way to obtain all those formats for the font?
Chris almost 11 years

I used Squirrel like Ryan de Vries suggested to get all the formats. Now it works in ie but it stopped working in chrome and ff.
Chris almost 11 years

This works now, it was just a little syntax problem since i removed the last (svg) one and forgot to change the , at the end of the line into ;.