@ font-face: cómo hacer que funcione en todos los navegadores

La regla @ font-face es compatible con Internet Explorer 9, Firefox, Opera, Chrome y Safari.

Sin embargo, Internet Explorer 9 solo admite tipos de letra .eot, mientras que Firefox, Chrome, Safari y Opera son compatibles con las fonts de tipo .ttf y .otf.

Nota: Internet Explorer 8 y versiones anteriores no son compatibles con la regla @ font-face.

Este texto es de aquí Entonces, para poder tener @ font-face en IE9, debería especificar el archivo de fuente EOT:

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

Particularmente estoy usando Myriad Pro, y tengo fonts OTF. ¿Cómo puedo convertirlos en EOT?

Y con respecto a IE7 e IE8, ¿qué truco / truco debería usarse para obtener el resultado deseado?

En primer lugar, no tiene los derechos de autor para incrustar la mayoría de las fonts, cualquiera puede descargarlas, por lo que no es diferente a poner la fuente en su servidor para que alguien la descargue.

Mi consejo sería utilizar la herramienta de ardilla de fuente que se encuentra aquí: http://www.fontsquirrel.com/fontface/generator para generar los archivos y el código para usted.

Tenga cuidado de no compartir fonts con las que no tiene derechos para hacerlo.

Creo que esto es casi completamente navegador cruzado

 @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; } 

La ubicación es la ruta en su servidor, y Name es el nombre de la fuente

Jacktheripper ya publicó una buena tipografía,

Te recomiendo los siguientes buenos artículos sobre ese tema:

Artículo de Paul Irish

Artículo de fuente

Personalmente, uso Google Web Fonts y estoy muy satisfecho con él. No tiene problemas para convertir las fonts, incrustar el código correcto y preocuparse por los problemas de derechos de autor con una buena variedad de fonts disponibles.

 @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'); } 

La directiva local () le permite hacer referencia, cargar y usar fonts instaladas localmente.

La directiva url () le permite cargar fonts externas, y se le permite contener un formato opcional () sugerencia