Cusom font with CSS - ONLY works with Internet Explorer

Question

I am making a website for a friend of mine. He is very specific about the font on the page. I have downloaded a custom font from the Internet, but the weird thing; it's only working in Internet Explorer (what a suprise).

This is my code:

@font-face
{
font-family: eurostile;
src: url(../font/eurostile.ttf);
} 
@font-face
{
font-family: eurostile;
src: url(../font/eurostile.eot);
}

And this is how I am calling the font-family:

  p 
    {
        font-family: eurostile;
    }

etc... What am I doing wrong?

http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face — zod, Jun 21 '13 at 22:41
just to be sure, are you able to install the TTF onto a computer successfully? Might help to make sure the file isn't corrupt in some way. Sometimes people use font converters to get different filetypes and I've had that mess up my files before. — Stacey Garrison, Jun 21 '13 at 22:42
The font was good! I did not test this, but it could be a very good explanation. The problem was my cross-browser problem, I forgot to add different filetypes :) @StaceyGarrison — Mr.Turtle, Jun 21 '13 at 22:47
Actually the problem was that you had 2 `@font-face` rules with exactly the same specifity, so all browsers tried to use the bottom one. Justice's answer correctly shows one `@font-face` rule with multiple src properties — Mr Lister, Jun 22 '13 at 07:37

score 3 · Accepted Answer · answered Jun 21 '13 at 22:34

You'll need to format it in a cross platform style. Look here.

The problem is that different browsers support different font styles.

enter image description here

Something like:

@font-face {
    font-family: 'fontMN';
    src: url('/fonts/font_font-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/font_font-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/font_font-webfont.woff') format('woff'), /* Modern Browsers */
         url('/fonts/font_font-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/font_font-webfont.svg#fontMN') format('svg'); /* Legacy iOS */
}

Would work.

You will need to acquire the formats that are valid for the browsers you're looking to support, as seen above.

he has enough fonts loaded for xbrowser (ttf and eot) but I bet adding the "format" part will help this work — Stacey Garrison, Jun 21 '13 at 22:37

score 0 · Answer 2 · answered Jun 21 '13 at 22:32

0

Browser use different formats. IE uses the eot format, most use woff, but some use svg or ttf/otf.

Check this out:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

You can create all these fonts by uploading a ttf/otf to fontsquirrel and using it's converter:

http://www.fontsquirrel.com/tools/webfont-generator

answered Jun 21 '13 at 22:32

Adam Jenkins

51,445
11
72
100

he's using a font that SHOULD work in browsers other than IE (ttf) so it can't just be the font format, assuming the .ttf file isn't corrupt. – Stacey Garrison Jun 21 '13 at 22:37
The .tff file worked in IE, no other. After I converted the file into several other files it worked – Mr.Turtle Jun 21 '13 at 22:49

score 0 · Answer 3 · answered Jun 21 '13 at 22:33

0

http://jasonlau.biz/home/css/embedding-custom-fonts-with-css

If you ever need to embed custom fonts in your website, this bit of CSS will accomplish the task. Follow the steps below to embed custom fonts in your website.

answered Jun 21 '13 at 22:33

zod

12,092
24
70
106

score 0 · Answer 4 · answered Jun 21 '13 at 22:34

0

Use this tool to generate the font-face rule - http://www.fontsquirrel.com/tools/webfont-generator.

answered Jun 21 '13 at 22:34

Nick R

7,704
2
22
32

Cusom font with CSS - ONLY works with Internet Explorer

4 Answers4