Utilizar fuentes True Type en una página WEB

Soy diseñador web que utilizo BlueFish sobre linux y hago todo el código a mano y se me ha presentado la necesidad de utilizar un tipo de fuente que me pedía un cliente. Buscando en internet encontré varias alternativas pero la que me funciono muy bien y es mas simple es la que les muestro hoy.

Open Type Embebido

Internet Explorer soporta un tipo de formato particular llamado Embedded OpenType que proporciona algo de control sobre dónde y cómo se permite embeber la fuente. Necesitarás convertir tu TTF al formato EOT.

Existen sitios y aplicaciones para convertir tu fuente TTF a EOT, con solo buscar en google "ttf to eot" aparecen. El que he utilizado es el siguiente http://www.kirsle.net/wizards/ttf2eot.cgi

Utilizar fuentes True Type en una página WEB


La página esta en ingles pero se entiende lo que pide. Lo primero es cargar la fuente que queremso usar, no debe supera el mega de tamaño. Luego se el da click al botón "Convert TTF to EOT!". Cuando termina la conversión aparece esta página.

Diseño Web


Aquí aparece un ejemplo de nuestra fuente y se pudo realizar la conversión y un link para descargar el archivo con la fuente en formato EOT. Luego aparecen las instrucciones para implementarlo en nuestro sitio.

<style type="text/css">
@font-face {
font-family: MI_FUENTE;
src: url("tipografia.eot" /* EOT file for IE */
}
@font-face {
font-family: MI_FUENTE;
src: url("tipografia.ttf" /* TTF file for CSS3 browsers */
}
body {
font-family: MI_FUENTE, Verdana, Arial, sans-serif;
font-size: medium;
color: black
}
span.header {
font-family: MI_FUENTE, Impact, "Arial Black", sans-serif;
font-weight: bold;
color: red
}
</style>


El archivo .ttf y el archivo descargado .eot deben estar en la misma carpeta de la página o indicar la ruta.

Hay otras formas de insertar fuentes TTF, una se conoce como sIFR y consiste en realizar el remplazo de las fuentes mediante flash. Y la otra alternativa es Cufón, la cuál utiliza javascript y la etiqueta canvas para remplazar cualquier texto por la fuente nueva, y es la que más se utiliza a día de hoy por no requerir plugins, tener una gran compatiblidad con todos los navegadores, ser fácil de usar y tener una gran velocidad incluso con grandes textos.

4 comentarios - Utilizar fuentes True Type en una página WEB

@PetSabionda
Es muy bueno este post .... va a fav. , te recomiendo que le sigas metiendo cosas
@Ozz989
Linux usando truetype? que eso no era de su archienemigo Microsoft (y antes de apple)? re cualquiera linux, tiene que hacer compatible todo para que medio funcione...
@xXDarkFOXx
Ozz989 dijo:Linux usando truetype? que eso no era de su archienemigo Microsoft (y antes de apple)? re cualquiera linux, tiene que hacer compatible todo para que medio funcione...

Por que el muy garcha de mocosoft quiere hacer todo un estándar, Linux no tiene la culpa.