¿Podemos cargar cualquier tipo de letra en una web?
por: Moises CalviñoLa 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:
- Ir a una web que convierte nuestro tipo de letra a un formato que se puede usar en web.
- Luego cargamos la letra en nuestra web de forma normal
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;
}
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
loading...
Post Relacionados
tags: CSS, Desarrollo web, Diseño web, tipo de letra web
[…] 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 […]
[…] 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 […]