Por favor, por su seguridad, instale un navegador más actualizado y seguro.
Cada vez está más cerca el día que podamos usar CSS3 y HTML5 en nuestros diseños, pero de momento nos tenemos que conformar con algunas pocas cosas para asegurar la compatibilidad entre navegadores actuales. Una de ellas es el uso de fuentes, que hasta ahora estaba restringido a las fuentes que el visitante tenía instaladas, por lo que al final, en la práctica, sólo se podía recurrir a las típicas comunes a todos los sistemas: Arial, Times... o a fuentes genéricas: serif y sans-serif.
Con HTML5 y CSS3 podemos emplear fuentes propias en nuestros diseños usando @font-face, lo que abre todo un nuevo abanico de posibilidades a los diseñadores. Sin embargo, estas tecnologías aún no están suficientemente implementadas como para usarlas a diario en diseños en producción, por lo que hay que usarlas con cuidado. Una forma muy sencilla de empezar a usar fuentes propias es emplear la Google Font API, que nos permite incrustar de forma muy sencilla algunas fuentes en nuestros diseños sin necesidad de tocar el código existente. Por ahora sólo hay disponibles 58 fuentes, aunque es de esperar que el número de fuentes vaya creciendo con el tiempo (cuando conocí Google Font API hace unos tres meses sólo había 18).
En este tutorial veremos como incrustar fuentes de forma compatible con todos los navegadores actuales y darles algún efecto agradable.
El primer paso para usar la API de Google Fonts es incluir el CSS, con una llamada en nuestro HEAD convenientemente formada. Por ejemplo:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
No tiene mucha complicación, simplemente hay que indicar la ruta, indicando como parámetro GET la fuente que deseamos cargar. La fuente debe estar escrita tal cual con su nombre, y si el nombre tiene espacios se deben sustituir estos por un símbolo '+', por ejemplo, 'Droid Sans' debería llamarse como 'Droid+Sans'
Es importante indicar también otras fuentes a usar en caso de que no se pueda mostrar la fuente deseada, ya que sólo los navegadores con soporte CSS3 podrán mostrarla
El siguiente paso es indicar en nuestro CSS que vamos a usar esta fuente. Es importante indicar también otras fuentes a usar en caso de que no se pueda mostrar la fuente deseada, ya que sólo los navegadores con soporte CSS3 podrán mostrarla. Por lo tanto, para asegurar la compatibilidad con navegadores más antiguos, se debe indicar siempre al menos una fuente alternativa y, obligatoriamente, una genérica ('serif' o 'sans-serif'):
h1 {
font-family: "Lobster", "Times", serif;
font-size: 1.8em;
font-weight: bold;
}
Basta con crear un archivo de prueba y abrirlo con un navegador actualizado para ver la fuente en HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pruebas con fuentes</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster" />
<style>
body {
width: 600px;
border: 1px solid #c9c9c9;
margin: 10px auto;
text-align: center;
padding: 20px;
}
h1 {
font-family: "Lobster", "Times", serif;
font-size: 1.8em;
}
</style>
</head>
<body>
<h1>Prueba de fuente Lobster</h1>
<p>
Este título es una fuente normal, que se puede seleccionar, indexar, etc...
</p>
</body>
</html>
El resultado debería ser como en esta imagen, con el título con una bonita fuente:
No tenemos que restringirnos a una sola fuente personalizada en nuestros diseños, ya que Google Fonts nos permite cargar varias. Para ello, se añaden en la carga del CSS, separadas por pipes (la barra vertical '|'), por ejemplo:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|Tangerine|IM+Fell">
Posteriormente, en nuestro CSS podríamos emplear cualquiera de ellas, ya que se habrán cargado las tres.
En caso necesario, debemos cargar las variantes de cada fuente que vayamos a emplear: negritas y cursivas, ya que cada variante se encuentra en paquetes distintos. Para añadir variantes, en la línea de carga del CSS se solicita cada variante separada de la fuente por un ':', y separadas las variantes por comas, por ejemplo:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster:bold,italic|Tangerine:bolditalic|IM+Fell">
Con esta línea estamos incluyendo las fuentes Lobster, Tangerine e IM Fell, y de Lobster además cargamos la fuente Lobster en negrita y cursiva, y la Tangerine en negrita-cursiva. Las variantes admiten abreviaturas, de modo que la línea superior es equivalente a:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster:b,i|Tangerine:bi|IM+Fell">
Cuando se carga una fuente, se incluye la fuente normal, la conocida como 'regular'. Al añadir variantes, estaremos cargando siempre la fuente normal más la variante.
Las variantes disponibles son:
| Estilo |
Variante |
| cursiva |
italic o i |
| negrita |
bold o b o un peso numérico como 700 |
| negrita-cursiva |
bolditalic o bi |
Aunque Google Fonts nos permita cargar todas las fuentes que queramos, y en todas sus variantes, esto no debe hacerse; cada fuente que se carga debe descargarse al navegador, por lo que ralentiza la carga de la página. Si una fuente pesa 30KB, e incluimos seis fuentes en todas sus variantes estamos forzando al usuario a descargarse 30*6*4=720KB, casi un MB, más del doble de lo que pesa la portada completa de una web típica.
No se deben incluir muchas fuentes ya que éstas se descargan al navegador del usuario, ralentizando la carga de la web
Por ello, hay que tener cuidado de incluir sólo las fuentes y sus variantes que sepamos que vamos a usar en nuestro diseño. Además, las guías del buen estilo dicen que una web no debería tener más de tres fuentes distintas, por lo que con usar una especial para ciertos encabezados ya es más que suficiente.
Actualmente Google Fonts ofrece 58 tipografías en alfabeto latino, y algunas más en cirílico y griego. Seguramente, con el tiempo podamos tener disponibles muchas más fuentes, pero de momento debemos conformarnos con estas 58. la lista completa con su previsualización se puede encontrar en: http://code.google.com/webfonts
Ya que hemos empezado a usar CSS3 para mejorar las fuentes en nuestro diseño, ¿por qué no ir un paso más allá? Una de las implementaciones más extendidas de CSS3 es el uso de sombras, por lo que vamos a añadir una ligera sombra a nuestros títulos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pruebas con fuentes</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster" />
<style>
body {
width: 600px;
border: 1px solid #c9c9c9;
margin: 10px auto;
text-align: center;
padding: 20px;
}
h1 {
font-family: "Lobster", "Times", serif;
font-size: 1.8em;
text-shadow: #aaa 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Fuente Lobster con sombra</h1>
<p>
Este título es una fuente normal, que se puede seleccionar, indexar, etc...
</p>
</body>
</html>
El resultado debería ser como en esta imagen, con nuestra fuente con sombras como si fuese una fuente normal más:
Actualmente está de moda el usar tipografías “inset”, es decir, tipografías que parece que están marcadas sobre el fondo, con un ligero relieve. Esto es muy sencillo de hacer en Photoshop o Gimp, pero de esa forma estamos usando una imagen; aunque se pueda añadir texto a la imagen, o pueda usarse como imagen de fondo de un elemento con el texto oculto con text-indent, no deja de ser un apaño, y en mucha situaciones es preferible que el usuario vea texto real (y pueda seleccionarlo, ser indexado por buscadores, etc). Este efecto también se puede conseguir con CSS3.
Primero, cambiamos nuestro HTML para añadir una capa que envuelva el texto:
<div id="dvWrapInset">
<h1 class="h1Inset">Titulo con relieve</h1>
</div>
Y añadimos los estilos necesarios al CSS:
h1 {
font-family: "Lobster", "Times", serif;
font-size: 2.8em;
padding-left: 50px;
padding-top: 17px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
#dvWrapInset {
width: 550px;
height: 100px;
background-color: #003471;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
Lo que hemos hecho es dar un fondo degradado a la capa contenedora, ya que los textos con efecto inset quedan mejor sobre este tipo de fondos. Para el texto, la línea importante es la que añade las sombras; lo que haremos será añadir varias sombras negras y una sombra blanca, con desplazamientos negativos para que se «monten» sobre el texto. Estos valores han sido extraídos de http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/, pero siempre se pueden cambiar para probar y ajustar más o menos el efecto de relieve.
text-shadow puede recibir cuatro parámetros para cada sombra, en este orden: color, desplazamiento en horizontal, desplazamiento en vertical y desenfoque. Salvo el color, todos los valores toman el valor cero si no se especifican.
Tras estos cambios, el ejemplo quedaría así:
Nota: en este ejemplo el degradado de fondo sólo funciona con navegadores Firefox o basados en Webkit, como Safari. Si usas otro navegador, puedes crear el fondo degradado con una imagen y añadirla al CSS de la capa contenedora:
background-image: url('fondo.jpg');
background-repeat: repeat-x;
Este método para usar fuentes distintas de las habituales es muy cómodo, pero estamos restringidos a las fuentes de Google Fonts que aunque son un buen número y van aumentando con el tiempo no podemos disponer de la fuente exacta que el proyecto requiera. Sin embargo, aún podemos utilizar la fuente que necesitemos empleando CSS3; para ello usaremos @font-face.
El funcionamiento es muy sencillo: subimos la fuente que queramos usar al servidor (por compatibilidad, debe estar en formato OpenType o TrueType); con @font-face indicamos dónde esta esa fuente y como la vamos a llamar, y a partir de ahí podemos usar esa fuente en el resto del CSS. El nombre que le demos es indiferente, ya que sólo es un identificador interno a nuestro CSS. Por ejemplo, añadimos esto a nuestro CSS:
@font-face {
font-family: SketchRockwell;
src: url('fonts/SketchRockwell-Bold.ttf');
}
@font-face {
font-family: RoughTypewriter;
src: url('fonts/rough_typewriter.otf');
}
@font-face {
font-family: RoughTypewriter;
font-weight: bold;
src: url('fonts/rough_typewriter_X_bold.otf');
}
h1 {
font-family: SketchRockwell, serif;
font-size: 1.8em;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: RoughTypewriter, serif;
font-size: 1.2em;
letter-spacing: 1px;
text-align: center;
}
Así estamos incluyendo dos fuentes, SketchRockwell y RoughTypewriter y de la segunda, además, la variante en negrita. Como anteriormente, es muy importante dar una fuente genérica para que los navegadores que no soportan la propiedad @font-face de CSS3 puedan seguir mostrando el contenido que tengamos con esa fuente. También como veíamos antes es importante no abusar de las fuentes, pues éstas tienen que descargarse al navegador del usuario.
Lo que veríamos con este CSS sería:
Mi sitio preferido para encontrar fuentes es www.dafont.com. Se pueden rastrear cientos de fuentes por tipos, y filtrarlas además por el tipo de licencia, de forma que nos aseguremos de que estamos usando una fuente que podemos distribuir.
Hay que tener cuidado con esto, ya que aunque muchas fuentes son de uso libre, muchas de ellas no permiten su distribución, y cuando usamos @font-face lo que estamos haciendo es, precisamente, distribuirlas. Es importante comprender que no es lo mismo usar una fuente que distribuir una fuente. Además, hay fuentes que tienen licencia libre para uso personal, pero que para uso comercial exigen el pago de una licencia.
Aunque en Google Fonts sólo tengamos un pequeño número de fuentes disponibles, nos ofrece la ventaja de que sus fuentes están en un servidor gestionado por Google, lo que consigue acelerar la carga de las páginas que lo usen por varias razones:
Puedes descargar el ejemplo completo para probarlo por ti mismo. Se incluyen varios archivos .html con lo visto en el tutorial y las fuentes que se han usado.
Esta web
http://alvaroremesal.net
, su contenido, texto e imágenes está licenciado bajo una
Licencia Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 España.
