IE Problem with True Type Font

Question

I intalled a new font on my website but I cannot get IE8 and IE9 to recognize, I have no knoledge on how the browsers render the fonts, but my css style sheet font declaration is as follows,

@font-face {     


font-family: VAGRounded;     src: url("../fonts/VAGRoundedW01-Light.eot") /* EOT file for IE */

 src:url("../fonts/VAGRoundedW01-Light.eot?#iefix") format('embedded-opentype');


 }

@font-face {  font-family: VAGRounded;  src: url("../fonts/VAGRoundedW01-Light.TTF") format('truetype'),

url("../fonts/VAGRoundedW01-Light.svg#webfontmvIrHXJB") format('svg');

Much help is appreciated!!

possible duplicate, http://stackoverflow.com/questions/5472207/ie-8-problem-with-custom-google-font — Pramendra Gupta, Sep 03 '11 at 01:22

crockpotveggies · Accepted Answer · 2011-09-03T01:33:09.870

3

IE8 and IE9 do not support embedded fonts via the CSS3 scheme without first converting into supported formats (SVG, TT, EOT, etc.). EDIT: IE8 and IE9 requires tweaks to support embedded fonts. See the comments on your question since it's a duplicate.

FYI IE10 will be the first IE browser to support the HTML5 standard.

There are nifty other methods of embedding fonts. The one I recommend is Cufon because it uses VML in older browsers and doesn't require flash.

http://cufon.shoqolate.com/generate/

edited Sep 03 '11 at 01:33

answered Sep 03 '11 at 01:24

crockpotveggies

12,682
12
70
140

How about IE8? , I just uploaded my font and gave a javascript as output , how would I go about installing this ? – Tony77 Sep 03 '11 at 01:28
There's some installation instructions for Cufon here: https://github.com/sorccu/cufon/wiki/Usage and if you're using Wordpress a Cufon plugin was created too http://wordpress.org/extend/plugins/wp-cufon/ – crockpotveggies Sep 03 '11 at 01:30
I am using joomla, I need this new font to be available to only the menu of my template, not the whole site – Tony77 Sep 03 '11 at 01:58
if its your navigation menu you'll need it for the whole site anyways so include in your template. Just use low-level header tags like
and you can format it just fine.
– crockpotveggies Sep 03 '11 at 05:09

score 1 · Answer 2 · answered Sep 03 '11 at 01:34

You should consider using a service like Font Squirrel.

It generates all the code for the various browsers.

Output would look something like this

@font-face {
    font-family: 'LivingstoneRegular';
    src: url('../livingst-webfont.eot');
    src: url('../livingst-webfont.eot?iefix') format('eot'),
         url('../livingst-webfont.woff') format('woff'),
         url('../livingst-webfont.ttf') format('truetype'),
         url('../livingst-webfont.svg#webfont44PDl6Sr') format('svg');
    font-weight: normal;
    font-style: normal;
}

http://www.fontsquirrel.com/fontface/generator

Thanks , but seems that my font is blocked – Tony77 Sep 03 '11 at 01:41 — Tony77, Sep 03 '11 at 01:41

score 0 · Answer 3 · answered Sep 19 '11 at 22:35

0

Try a proper syntax: Fontspring Syntax, Further Hardening of the Bulletproof Syntax, Mo’ Bulletproofer, or Smiley.

answered Sep 19 '11 at 22:35

Paul

353
5
13

IE Problem with True Type Font

3 Answers3

and you can format it just fine.

Linked