Google Fonts

Uno de los problemas del diseño web es que el conjunto de tipografías soportadas por los navegadores (las denominadas web safe fonts) es muy reducido, así que si quieres usar una tipografía más original o diferente en tu web es necesario que la alojes en alguna parte e insertes el código en la plantilla para que se cargue con la página. Y aquí entra un servicio de Google que he descubierto hace poco: Google Fonts. Google Fonts ofrece un montón de tipos de letra gratuitos clasificados en 4 categorías, y que permite filtrar para encontrar lo que buscas. Además te da el código fuente que has de insertar en tu plantilla y una estimación de la sobrecarga que va a suponer a la hora de cargar la página.

Hay otras maneras de utilizar tipografías no estandar en tu web, como por ejemplo alojar el archivo de la tipografía en tu servidor y cargarla insertando este trozo de código en la plantilla:

<style type="text/css">
@font-face {
font-family: "Name of your font";
src: url(http://www.nameofyourserver.org/yourfont.ttf) format("truetype");
}
</style>

Con esto ya podrás usar esta tipografía para cualquier trozo de texto simplemente utilizando style="font-family: 'Name of your font'" en el estilo de ese trozo. La desventaja que tiene este método es que me da la impresión de que es más lento que cargar las tipografías a través de Google Fonts. La ventaja es que no dependes de Google Fonts, que como ha pasado con el servicio Google Reader, en cualquier momento Google puede anunciar que lo jubila.

Also in English...

One of the problems in web design is that the font set supported by the web browsers (the so-called web safe fonts) is quite limited, so if you want to use a more original or different typeface in your website, you must allocate it somewhere and insert the code in the template so it can be loaded with the webpage. And here it comes a Google service I discovered few days ago: Google Fonts. Google Fonts offers a large amount of free fonts classified in 4 categories and it lets you to filter them in order to find what you're looking for. Furthermore, it gives you the source code you have to insert in your template and an estimation of the page overload.

There are other ways to use non-standard fonts in your website, for example allocating the font file in your server and loading it inserting this piece of code in the template:

<style type="text/css">
@font-face {
font-family: "Name of your font";
src: url(http://www.nameofyourserver.org/yourfont.ttf) format("truetype");
}
</style>

This way you will be able to use the font in any piece of text just using style="font-family: 'Name of your font'" in the style of that fragment. The downside of this method is that I have the impression it is slower to load than using Google Fonts. The upside is that you don't depend on Google Fonts, since it could be that, like it happened with Google Reader service, Google decides to throw it out anytime.