Use different font in internet explorer only

Question

I am having a real serious trouble using custom face in internet explorer.

I am using a specific font now, with font-face, and it working perfectly fine in modern browser, but i just cannot get it to work in IE.

The method I am using the font in Chrome, Firefox, etc. is the following:

font-family: xy;
src: url(fonts/xy.otf);

}

Is there a way that IE use another font?

font-family: xy, iefont, sans; is not working, because font-typed is specified in a lot of css, and places,

* {font-family: xy, iefont, sans !important} is not working becasue it drops the "FontAwesome" family specified earlier.

What is the simpliest to format every text but only for IE?

Custom font files has some issues rendering on IE, if you use Google Fonts, I believe you will not see such issues. — Zafar, Apr 26 '14 at 14:15
Literal answer: [add an IE-specific rule](http://stackoverflow.com/questions/11173106/apply-style-only-on-ie). See the other answers, this is not the best way. — Jongware, Apr 26 '14 at 14:26

score 2 · Accepted Answer · answered Apr 26 '14 at 14:35

IE specific CSS

For browser specific css files I would recommend:

Simple solution, just use this JS library and you can easily apply styles for every browser/os combination:

BrowserClass.js

With this you will get a class name on the body tag with the current name and version of the browser also with the used OS.

After include the file:

<script src="js/browserclass.js"></script>

For example on Windows 8.1 with the latest ie you will see:

<body class="ie ie11 win desktop">

And in your style file you can refer by: (.sass styling)

body.ie
  +declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)

Note: Conditional Comments in IE only work for up to IE9!

SASS mixin

Or If u are using SASS, here's a good mixin:

// ---------------------
// Font Face Mixin
// ---------------------
=declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal)
  @font-face
    font-family: #{$font-family}
    src: url("../fonts/#{$font-filename}.eot")
    src: url("../fonts/#{$font-filename}.eot?#iefix") format("embedded-opentype"), url("../fonts/#{$font-filename}.svg##{$font-family}") format("svg"), url("../fonts/#{$font-filename}.woff") format("woff"), url("../fonts/#{$font-filename}.ttf") format("truetype")
    font-weight: $font-weight
    font-style: $font-style
    font-stretch: $font-stretch

Usage:

+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)

score 1 · Answer 2 · answered Apr 26 '14 at 14:21

1

Internet explorer uses .eot font files. You can make this work even in IE8. You need to convert your otf fonts to woff, eot, ...

@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 */
}

You can use http://www.fontsquirrel.com/ for example to generate these files.

answered Apr 26 '14 at 14:21

JohanVdR

2,880
1
15
16

thanks for your reply, i converted my otf file to eot using an online converter, now my fontface code looks like this: ` @font-face { font-family: xy; src: url(fonts/xy.otf); src: url('fonts/xy.eot'); /* IE9 Compat Modes */ src: url('fonts/xy.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ } ` and still nothing happened in ie (i11, win8) – Richard Zilahi Apr 26 '14 at 16:43
Maybe IE 11 has a bug? – JohanVdR Apr 26 '14 at 17:04

score -2 · Answer 3 · answered Apr 26 '14 at 14:31

-2

You can make use of Conditional Comments in IE.

<!--[if IE]>
<style>
.myfontclass {
//your IE specific font here
}
</style>
<![endif]-->

Hope that helps!

answered Apr 26 '14 at 14:31

user3575278

21
1
4

no, unfortunately ie conditional has been removed in ie 9,11, with the follwing statement: _Conditional Comments are not required. There’s no need for “[if IE 10]“ because pages will render (mostly) the same in all modern browsers._ – Richard Zilahi Apr 26 '14 at 16:47
@user3576148 ok i was unaware of that.thanks for pointing that out. – user3575278 Apr 27 '14 at 09:34

Use different font in internet explorer only

3 Answers3

IE specific CSS

SASS mixin