Google Web Fonts es un servicio muy útil para usar fuentes en nuestro blog o web. Pero no todo el mundo sabe que su API tiene ciertas utilidades para poder hacer que la página cargue más rápido.

Si no las conocíais, algunas de esas utilidades son poder cargar varias fuentes de un mismo archivo, poder usar una fuente sólo con unos carácteres(para un título, por ejemplo), etc

Para usar una fuente Google nos da un código como éste: <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NOMBREFUENTE"/>. Así que si queríamos instalar varias así tendríamos que poner:


<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FUENTE1"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FUENTE2"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FUENTE3"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FUENTE4"/>

Pues no. La api nos permite descargar todas con un solo link, para poder hacer 3 solicitudes menos:


<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FUENTE1|FUENTE2|FUENTE3|FUENTE4"/>

¿Y si necesitamos textos en negrita, itálica, etc? Como habéis visto, sólo hace falta poner las familias separadas por “|” pero si, por ejemplo, quisiéramos tener en negrita la “FUENTE1”, tendríamos que cambiar FUENTE1 por FUENTE1:bold. En cursiva sería FUENTE1:italic, y en ambas a la vez FUENTE1:bolditalic. Podríamos combinarlos, por ejemplo, poniendo FUENTE1:bold,bolditalic.

¿Usas una fuente sólo para el título del blog, o un texto estático? Entonces hay una solución para tí. Google nos permite usar una fuente sólo con unos carácteres(lo que reduce mucho la carga), así que si por ejemplo, quisiéramos poner nuestro título en fuente “Open Sans”, tendríamos que escribir: <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans&text=ELTEXTO"/>. Tened en cuenta que el texto tiene que estar codificado, pero eso lo podéis hacer aquí:

El único problema que se me ocurre es que para usar un texto en una sola fuente no se puede combinar con otras, pero aún así, merece la pena.

7 pensamientos en “Usar inteligentemente Google Web Fonts

    • Imagen de Emilio Cobos Álvarez el dijo:

      El problema no es de la fuente. La fuente es la que es, y dependiendo del tamaño de la letra y de su forma, es posible que en las líneas curvas se pixele. Generalmente, se puede solucionar con text-shadow (yo en los títulos del blog la uso).

      En el caso de los títulos de tu blog, un intento podría ser este:
      text-shadow: 1px 1px 1px rgba(255, 204, 0, .9);

      De todas maneras, es ir probando hasta que encuentres una que minimice el efecto.

      • Imagen de Juan Antonio Cobo el dijo:

        Lo siento pero cómo odio las típicas respuestas puedes solucionarlo con Javascript, Javascript no es la panacea del diseño web. Usar Javascript no significa “arreglarlo todo con Javascript” sino un complemento, …más o menos indispensable ya depende de cada uno pero debe ser eso: un complemento.
        Lo normal profesional correcto es decidir y analizar recursos y su disponibilidad para tener un primer diseño funcional, preparar fallbacks estándares para “degradación elegante” y/o implementar “mejora progresiva”.
        Porque como diría Zeldman:

        Content precedes design. Design in the absence of content is not design, it’s decoration.

        Tu contenido no puede depender de un diseño, en este caso x tipografías cuyo colmo sea su aplicación mediante un complemento.

        Y si suelto este tocho, este sermón es porque uno se empieza a cansar ya de ver cómo, curiosamente, en la época de la web semántica, los diseñadores (amateur) se la están zampando mientras se jactan y venden sus diseños basados en cosas como Twitter Bootstrap (mal aplicado) y diseños que no son funcionales sin Javascript.

        PD: La evangelización de los estándares nos llevó a grandes logros como la muerte de “IE6”, el nacimiento de XHTML y su hijo híbrido HTML5. Por eso hay que seguir soltando estos sermones en cualquier blog que se precie :)

        Acabo de descubrirlo y me parece muy interesante el blog, Emilio.
        Saludos ;)

      • Imagen de Emilio Cobos Álvarez el dijo:

        Genial respuesta, Juan Antonio. Lo cierto es que la respuesta es esa, diseñar con estándares web, no importa la situación.

        Además mezclar Javascript con el Diseño sería una mezcla de conceptos, una rotura de esa diferenciación que tanto nos debería de importar:
        HTML › Contenido
        CSS › Diseño
        Javascript › Comportamiento

        PD: No me creo que conozcas a Jeffrey Zeldman ;) Me has dado una alegría.

Responder a Juvinao Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.