1

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

Abriel
  • 583
  • 1
  • 10
  • 33
thanmai
  • 258
  • 3
  • 13

4 Answers4

1

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!

Community
  • 1
  • 1
Abriel
  • 583
  • 1
  • 10
  • 33
  • Its not working. I am currently executing it from my local machine itself. It is not working in firefox too now. The font i had copied from is a icon type font. the link is -> http://openfontlibrary.org/en/font/richstyle – thanmai Dec 05 '12 at 10:01
  • this link http://openfontlibrary.org/en/font/richstyle which i had posted earlier, i tried it in IE 9. but it seems the guys haven't written any code for that to display in IE9. Its still the same. – thanmai Dec 05 '12 at 10:30
  • @thanmi maybe you could try like the gentleman said and take the font and use Font Squirrel to create the CSS font code and font files for you to use on the site locally insteal of off the link – Abriel Dec 05 '12 at 13:00
  • I tried that too, but no change in the output. And in my code i have downloaded it & i am using it through that. – thanmai Dec 05 '12 at 14:33
  • Have you tried doing a combination of putting in the link to the head, like @obl did in her answer, and inserting the font-face CSS? See if that works because I had seen a Wordpress template use that technique to make a font embed. – Abriel Dec 06 '12 at 04:18
0

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

  • Are you working locally? Try running it through XAMP/WAMP/MAMP/LAMP server. –  Dec 05 '12 at 10:33
  • I am not using any server in local system. It is just a plain html,css file. And I am opening that in a web browser, where url is the file location. – thanmai Dec 05 '12 at 10:34
0

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

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

obl
  • 76
  • 1
0

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.

Anas R.
  • 357
  • 5
  • 15