CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-9
thanmai
thanmai

Reputation: 258

Unimportable Font Not Displaying in IE9

This is my code:

@font-face {
    font-family: 'font-icon';
    src: url('richstyle-webfont.eot');
    src: url('richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('richstyle-webfont.woff') format('woff'),
         url('richstyle-webfont.ttf') format('truetype'),
         url('richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

I am not able to display the font-icon

Upvotes: 1

Views: 160

Answers (4)

Anas R.
Anas R.

Reputation: 367

Here's how to use RichStyle font: http://richstyle.org/richstyle-theme/theme.css

I mean something like this:

@font-face {
font-family: 'RichStyle';
src: url('{url}/RichStyle.eot');
src: url('{url}/RichStyle.eot?#iefix') format('embedded-opentype'),
     url('{url}/RichStyle.woff') format('woff'),
     url('{url}/RichStyle.ttf') format('truetype'),
     url('{url}/RichStyle.svg#richstyle') format('svg');
font-weight: normal;
font-style: normal;

}

Where {url} is a RELATIVE location of the font.

Upvotes: 0

Abriel
Abriel

Reputation: 583

I've had lots of trouble with this myself before. Check to see where you downloaded the font files compared to your root folder in relation to the HTML/CSS file.

For example, if all the fonts are in the same location in the root folder, the code you have above is correct.

There are two other scenarios that could arise. The first is if you downloaded them into a newly created folder called fonts that is in a folder within the root, the code would be the following:

@font-face {
    font-family: 'font-icon';
    src: url('fonts/richstyle-webfont.eot') format('eot');
    src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/richstyle-webfont.woff') format('woff'),
         url('fonts/richstyle-webfont.ttf') format('truetype'),
         url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

The other scenario could be if the file is in another folder within your website root directory, but the font files are in fonts that's in a completely separate folder. The way to access it would be to create a different relative link, like the following:

@font-face {
    font-family: 'font-icon';
    src: url('../fonts/richstyle-webfont.eot') format('eot');
    src: url('../fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/richstyle-webfont.woff') format('woff'),
         url('../fonts/richstyle-webfont.ttf') format('truetype'),
         url('../fonts/richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

It depends on how you point the URL source in the code. Like I said, I've had this problem many times before. Try this first and see if it helps.

The other thing you could do is do the same as this person posted on his answer: @font-face works in IE8 but not IE9

He also added this smileyface-local: src: local("☺"), into the code, so your code would look like this: 

@font-face {
    font-family: 'font-icon';
    src: url('fonts/richstyle-webfont.eot');
    src: local("☺"); <-- should've been a semi-colon
    src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/richstyle-webfont.woff') format('woff'),
         url('fonts/richstyle-webfont.ttf') format('truetype'),
         url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

Below is a better way of writing out the code. Try this and see how it works for you:

@font-face {
    font-family: 'font-icon';
    src: local("☺"), 
         url('fonts/richstyle-webfont.eot') format('eot'),
         url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/richstyle-webfont.woff') format('woff'),
         url('fonts/richstyle-webfont.ttf') format('truetype'),
         url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

Hope this helps!

Upvotes: 1

obl
obl

Reputation: 76

Have you tried so: http://jsfiddle.net/xGLaz/ ?

Or maybe you must change font-family: 'font-icon'; by font-family:'RichStyle';

Upvotes: 0

user818991
user818991

Reputation:

Try this:

@font-face {
  font-family: 'font-icon';
  src: url('fonts/richstyle-webfont.eot');
  src: local('?'),
         url('fonts/richstyle-webfont.otf') format('opentype');
}

or this

@font-face {
  font-family: 'font-icon';
  src: url('fonts/richstyle-webfont.eot?') format('eot'), 
  url('fonts/richstyle-webfont.woff') format('woff'), 
  url('fonts/richstyle-webfontb.ttf') format('truetype');
}

This comes from Paul Irish's Bulletproof font post

Upvotes: 0

Related Questions