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

Question

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

However, Internet Explorer 9 only supports .eot typ

Answer 1

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.

Answer 2

@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

Answer 3

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.

Answer 4

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