Diseño web

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.

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;

}

 

2. Luego cargamos la letra en nuestra web de forma normal

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