CODEWITHSUNDEEP
htmlcssinternet-explorerfont-face
Karine
Karine

Reputation: 587

@font-face - how to make it work on all browsers

The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

This text is from here. So in order to have working @font-face for IE9 I should just specify EOT font file:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Particularly I am using Myriad Pro, and I have OTF fonts. How I can convert them into EOT type?

And regarding to IE7 and IE8 what trick/hack should be used to obtain the desired result?

Upvotes: 4

Views: 30238

Answers (4)

Behnam
Behnam

Reputation: 6459

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

The local() directive allows you to reference, load, and use locally installed fonts.

The url() directive allows you to load external fonts, and are allowed to contain an optional format() hint

Upvotes: 1

Christoph
Christoph

Reputation: 51181

Jacktheripper already posted a good font-face,

i recommend you the following good articles on that topic:

Article from Paul Irish

Article from fontspring

Personally, i use Google Web Fonts and am very satisfied with it. You have no troubles converting the fonts, embedding the right code, and worrying about copyright issues with a good variety of available fonts.

Upvotes: 0

jacktheripper
jacktheripper

Reputation: 14209

I think this is almost fully cross-browser

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

Location is the path on your server, and Name is the font's name

Upvotes: 9

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

Firstly, you don't have the copyright to embed most fonts - anyone can download them, so it's no different to putting the font on your server for someone to download.

My advice would be to use the font squirrel tool found here: http://www.fontsquirrel.com/fontface/generator to generate the files and the code for you.

Be careful not to share fonts you don't have the rights to do so with.

Upvotes: 3

Related Questions