CODEWITHSUNDEEP
cssinternet-explorerfont-family
Richard Zilahi
Richard Zilahi

Reputation: 692

Use different font in internet explorer only

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?

Upvotes: 2

Views: 4277

Answers (3)

Peter MK
Peter MK

Reputation: 133

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)

Upvotes: 2

user3575278
user3575278

Reputation: 21

You can make use of Conditional Comments in IE.

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

Hope that helps!

Upvotes: -2

JohanVdR
JohanVdR

Reputation: 2878

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.

Upvotes: 1

Related Questions