@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

@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