Different Type Font use in CSS

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.

First you create New Font... [ .ttf ->.eot / .eot ->.ttf ]

Specify a font named "heading-01", and specify the URL where it can be found:

---

@font-face
{
    font-family:heading-01;
    src: url('../font/myriad.eot');

    src:  url('../font/myriad.ttf') format('opentype');
}
p
{
    font-family:heading-01;
}