Archivo categoría css
Cargar tipografías web en Internet Explorer
Por Fran - css, Diseño web - 22 junio, 2011
Internet Explorer continúa sin cumplir los estándares, y esto trae de cabeza a los diseñadores web. Cuando quieres cargar una de las tipografías de Google en tu web o cualquier otra fuente compatible, utilizas el código para insertarla que te facilita Google y descubres que el maldito Internet Explorer no la muestra. Arreglar esto supone un trabajo extra para el diseñador.
¿Qué debemos hacer para que Internet Explorer muestre una fuente?
1. Descargar la fuente
Tenemos que usar una parte del código que Google nos facilita para insertar una de sus fuentes en nuestra web cuando hacemos clic en “Use this font”. En el caso de la tipografía Lobster:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&v1' rel='stylesheet' type='text/css'>
Debemos copiar la dirección completa que hay entre comillas simples del atributo href y pegarla en nuestro navegador. Cuando cargue esta dirección veremos el siguiente código:
@font-face {
font-family: 'Lobster Two';
font-style: normal;
font-weight: 400;
src: local('Lobster Two'), local('LobsterTwo'), url('http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc') format('woff');
}
De aquí tendremos que repetir la misma operación. Copiamos la dirección que hay entre las comillas de url
http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc
De nuevo en nuestro navegador, pegamos la dirección, y podremos descargar la fuente (Lobster en el ejemplo). La guardamos en nuestro equipo.
2. Generar un kit en FontSquirrel
El siguiente paso es utilizar la fuente que hemos descargado para generar un kit en el generador de kit de FontSquirrel
Subimos la fuente que descargamos en el paso 1 (Add fonts). Marcamos el checkbox ‘Yes, the fonts……’ y hacemos clic en Download your kit. Obtendremos un archivo comprimido.
3. Modificar nuestra hoja de estilo CSS
Cuando descomprimimos el kit que acabamos de descargar, obtenemos una carpeta con varias tipografías (formatos: eot,svg,ttf,woff …) y una hoja de estilo stylesheet.css. El código de la hoja de estilo, tendremos que añadirlo a la nuestra:
@font-face {
font-family: 'Lobster';
src: url('lobster-webfont.eot');
src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'),
url('lobster-webfont.woff') format('woff'),
url('lobster-webfont.ttf') format('truetype'),
url('lobster-webfont.svg#Lobster') format('svg');
font-weight: normal;
font-style: normal;
}
Y por último, debemos subir a nuestro servidor nuestra hoja de estilo modificada y los archivos de las tipografías. Es muy importante que prestemos atención a la ruta hacia los archivos de fuentes, si queremos guardarlos en una ubicación que no sea la misma carpeta en la que está nuestra hoja de estilo, deberemos modificar el código CSS para que las pueda localizar correctamente.
Esto es todo el trabajo extra que nos obliga a hacer Internet Explorer cuando queremos mostrar una tipografía especial en nuestras webs. ¡Con lo fácil que es usar el código que nos da Google!
¿A vosotros os da muchos quebraderos de cabeza Internet Explorer?
Google Font: tipografías libres para la web
Por Fran - css, Diseño web, Recursos - 20 mayo, 2010
Vía Twitter he conocido GoogleFont, con el que podemos usar en nuestras webs tipografías de gran calidad con licencia open source.
El principal problema de los diseñadores web a la hora de trabajar con tipografías es que si se utilizan fuentes poco comunes muy pocos usuarios verán la página tal y como se diseñó. Una solución a este problema es utilizar sistemas de reemplazo como SIFR, basado en Flash. Otra solución es embeber la propia fuente en la página para que el usuario la descargue como un elmento más junto a imágenes y resto de recursos web.
[ACTUALIZACIÓN] Un día después de publicar este post conozco Fonts-Live de Ascender. ¿Estaremos ante la guerra de las tipografías web?
Los diferentes navegadores no tratan de forma homogénea las tipografías embebidas. Con la librería de javascript WebFont Loader podremos cargar tipografías (de Google o de cualquier proveedor, como Typekit), controlar cuándo se ha completado la carga para hacer un callback o incluso mostrar tipografías comunes mientras se realiza la descarga de la fuente.
De momento éstas son las que hay disponibles a través de licencia open source de Google, aunque se prevé que el catálogo aumente:
Cómo insertar una tipografía.
Es realmente sencillo insertar una tipografía desde Google Font en nuestra web:
1. Enlazamos con la tipografía alojada en los servidores de Google:
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css' />
En el Directorio de fuentes tenemos toda la información necesaria sobre cada una de las fuentes disponibles, incluído el código de ejemplo para insertarlas en nuestra página.
2. La llamamos desde el estilo CSS
h1 { font-family: 'Cantarell', arial, serif; }
Y listo, ya la tenemos funcionando.
Variantes de una tipografía.
Para conseguir variantes de una fuente, como cursiva, negrita, etc. debemos añadir los parámetros de la API a la url:
<link href='http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
Habría que verificar en el Google Font Directory las variantes disponibles para cada tipografía.
Cargar desde CSS con @import
Existe la posibilidad de cargar la tipografía desde el propio código CSS:
@import url(http://fonts.googleapis.com/css?family=Cantarell);
WebFont loader
Ésta es la librería con la que tendremos mayor control del proceso de carga de las tipografías.
Con el siguiente ejemplo, conseguimos que primero se muestre el texto en la fuente serif por defecto, y cuando las fuentes han sido descargadas, se muestra el texto en la fuente especificada:
This is using Cantarell
This is using Tangerine!
Google´s AJAX APIs
Si usas alguna de estas apis Ajax, puedes cargar el WebFont Loader así:
Especificando proveedores y fuentes
Este ejemplo carga la Tangerine y Cantarell desde la API de Google Font
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
También podemos cargar de Typekit:
WebFont.load({
typekit: 'myKitId'
});
O de ambos:
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId'
});
Además disponemos de un módulo personalizable (custom) que puede cargar una hoja de estilo desde cualquier proveedor de fuentes:
WebFont.load({
custom: { families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ] }
});
Para más completa información sobre el Google WebFont Loader puedes visitar la página oficial.