CODEWITHSUNDEEP
htmlcssinternet-explorerfonts
emptyjayy
emptyjayy

Reputation: 544

Custom fonts not rendered in bold or italic in IE

I'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.

Here is a demo: http://jsfiddle.net/maitreyjukar/5ga5k2oa/

I am loading the font using the following CSS

@font-face {
    font-family: k_Arial;
    src: local("Arial"), 
        local("Helvetica"), 
        local("sans-serif");
    font-weight: normal;
    font-style: normal;
}

for all combinations of font-weight and font-style.

Upvotes: 0

Views: 1265

Answers (3)

Mr_vasu
Mr_vasu

Reputation: 98

you can define your font like below example, this will work in all the browsers. 

@font-face {
        font-family: 'ProximaNovaRegular';
        src: url('../fonts/ProximaNovaRegular.eot');
        src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
             url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
             url('../fonts/ProximaNovaRegular.woff') format('woff'),
             url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
             url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
    }

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 11

This is not only not an IE-specific issue it doesn't work on other browsers like Firefox. Just write one font-face Rule istead of four like this:

@font-face {
font-family: k_Arial;
src: local("Arial"), 
    local("Helvetica"), 
    local("sans-serif"); 
}

Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.

Upvotes: 1

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...

local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.

However, you seem want to solely use locally installed fonts with a certain fallback order. To achieve this, you could simply do the following:

body {
  font-family: Arial, Helvetica, sans-serif;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}

Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.

JS-Fiddle

Upvotes: 0

Related Questions