2011
24
feb

¿Podemos cargar cualquier tipo de letra en una web?

Por:

La respuesta es Si, no es necesario que el usuario tenga instalado el tipo de letra ni que la web esté programada en Flash.

A continuación os describimos las instrucciones para realizarlo:

  1. Ir a una web que convierte nuestro tipo de letra a un formato que se puede usar en web.
  2. http://www.fontsquirrel.com/fontface/generator

    Esta pagina te genera el código css y las fuentes en un archivo . rar que te descarga.

    Hay que hacerlo una vez por cada estilo de la letra que queramos usar, por ejemplo, si usamos fuente normal y negrita generaremos el CSS 2 veces, una para la letra en negrita y otra para la normal.

    Vamos a ver un ejemplo para el tipo de letra Myriad Pro

    Ejemplo del css para la letra normal, el Font-weight: normal; lo define

    @font-face {

    font-family: ‘MyriadPro’;

    src: url(‘myriadpro-semibold-webfont.eot?’) format(‘eot’),

    url(‘myriadpro-semibold-webfont.woff’) format(‘woff’),

    url(‘myriadpro-semibold-webfont.ttf’) format(‘truetype’),

    url(‘myriadpro-semibold-webfont.svg#webfontJdGIerQQ’) format(‘svg’);

    font-weight: normal;

    font-style: normal;

    }

    Ejemplo del css para la letra negrita, el Font-weight: bold; lo define

    @font-face {

    font-family: ‘MyriadPro’;

    src: url(‘myriadpro-bold-webfont.eot?’) format(‘eot’),

    url(‘myriadpro-bold-webfont.woff’) format(‘woff’),

    url(‘myriadpro-bold-webfont.ttf’) format(‘truetype’),

    url(‘myriadpro-bold-webfont.svg#webfontYhHcrIrT’) format(‘svg’);

    font-weight: bold;

    font-style: normal;

    }

     

  3. Luego cargamos la letra en nuestra web de forma normal
  4. font-family:”MyriadPro”,Arial;

NOTA: en los 2 @font-face el Font-family: tiene que tener el mismo nombre, si no es así falla y lo ve como fuentes distintas, copiamos todo en nuestro css y listo.

Moisés Calviño

GD Star Rating
loading...

Tags: , , ,


2 Respuestas a “¿Podemos cargar cualquier tipo de letra en una web?”

  1. Cómo agregar distintos tipos de letra a mi web. - e-SORT Blog Diseño Web dice:

    [...] un post antenrior explicamos como ¿Podemos cargar cualquier tipo de letra en una web?, pero era necesario tener la fuente original y el permiso necesario para poder [...]

  2. Cargar cualquier tipo de letra en una web que no es Flash dice:

    [...] Cargar cualquier tipo de letra en una web que no es Flash http://www.e-sort.net/blog/?p=1090  por e-sort hace 4 segundos [...]