Css @font-face not working in ie9

Question

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.

possible duplicate of [@font-face works in IE8 but not IE9](http://stackoverflow.com/questions/4607560/font-face-works-in-ie8-but-not-ie9) — Niels Keurentjes, May 23 '13 at 10:08
You should use a .woff font (for new browers) an .eot font for older IE, and an SVG font for earlier iOS devices, in addition to the ttf. Even easier, use Google Web Fonts for this. — Rich Bradshaw, May 23 '13 at 10:17

score 12 · Accepted Answer · answered May 23 '13 at 10:05

12

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

answered May 23 '13 at 10:05

mario595

3,671
7
34
57

Is there an easy way to obtain all those formats for the font? – Chris May 23 '13 at 10:19
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 May 23 '13 at 10:30
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 ;. – Chris May 23 '13 at 10:33

score 3 · Answer 2 · edited May 23 '17 at 11:45

3

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"

edited May 23 '17 at 11:45

Community

1
1

answered May 23 '13 at 10:16

Ryan de Vries

676
4
13

Niels Keurentjes · Answer 3 · 2013-05-23T10:18:58.310

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>

The application will run in intranets with no warranty that there is an internet connection so i'll have to host them myself. — Chris, May 23 '13 at 10:19
@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. — Niels Keurentjes, May 23 '13 at 10:19

score 0 · Answer 4 · edited May 23 '17 at 11:50

0

the answer to this question suggests that IE9 only supports the format('woff') have you tried this ?

@font-face works in IE8 but not IE9

edited May 23 '17 at 11:50

Community

1
1

answered May 23 '13 at 10:06

Simon McLoughlin

8,293
5
32
56

Css @font-face not working in ie9

4 Answers4

Linked