CODEWITHSUNDEEP
internet-explorercssinternet-explorer-9webfonts
Chris
Chris

Reputation: 7853

Css @font-face not working in ie9

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.

Upvotes: 2

Views: 18783

Answers (4)

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

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>

Upvotes: 1

Ryan de Vries
Ryan de Vries

Reputation: 686

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"

Upvotes: 3

Simon McLoughlin
Simon McLoughlin

Reputation: 8475

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

Upvotes: 0

mario595
mario595

Reputation: 3761

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

Upvotes: 12

Related Questions