CODEWITHSUNDEEP
htmlcssfontsmozilla
Mr.Turtle
Mr.Turtle

Reputation: 3090

Cusom font with CSS - ONLY works with Internet Explorer

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?

Upvotes: 0

Views: 1258

Answers (4)

Nick R
Nick R

Reputation: 7794

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

Upvotes: 0

Justice Cassel
Justice Cassel

Reputation: 359

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.

Upvotes: 3

zod
zod

Reputation: 12437

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.

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55782

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

Upvotes: 0

Related Questions