Fuentes tipográficas no estándar en tu sitio web con CSS.
¿Alguna vez has querido utilizar fuentes tipográficas no “estándar” en tu sitio web? Bueno, las cosas comienzan a cambiar y actualmente algunos navegadores son capaces de mostrar fuentes TTF utilizando solamente CSS. Si visualiza este texto en las últimas versiones de los navegadores Firefox, Opera, IE6, IE7, IE8 y Safari, lo verá con la fuente MarketingScript TTF.
¿Cómo conseguirlo?
Para poder utilizar la fuente que queremos, debemos tener dos archivos: El archivo de la fuente (TTF) y un archivo con extensión .EOT, que permite que los navegadores interpreten la fuente tipográfica. Pueden visitar la siguiente web de fuentes gratuitas y que permite descargar los ficheros necesarios (@font-face Kit) www.fontsquirrel.com.
En la hoja de estilo hay que declarar el siguiente código:
@font-face {
font-family: 'MarketingScriptRegular';
src: url('MarketingScript.eot');
src: local('Marketing Script Regular'), local('MarketingScript'), url('MarketingScript.ttf') format('truetype');
}
Posteriormente donde se quiera utilizar esa fuente solo hay que declarar la familia en la hoja de estilo, ejemplo:
p.style1 {
font: 20px/27px 'MarketingScriptRegular', Arial, sans-serif;
}
Si el navegador no es capaz de mostrar la fuente no estándar, mostrará la Arial.
El único problema que he encontrado es que aun no es compatible con Google Chrome, aunque está en versión BETA.
