Diseñadora industrial con años de experiencia en diseño web y HTML/CSS. Además de aportar su creatividad, Laura es la encargada de gestionar las campañas de marketing online de Axtro.
Hace apenas unos días Google lanzó una aplicación llamada Google Font que nos permite a los desarrolladores utilizar tipografías distintas a las estandar, consiguiendo así darle un toque diferente a la web y todo ello sin tener que subir archivos de tipografías a nuestro servidor.
Veamos entonces algunos puntos que nos interesará saber...
¿Qué tipografías tengo disponibles para utilizar?
Pues las tienes todas en este catálogo de tipografias que Google ha confeccionado. Ahora mismo hay disponibles unas 18 familias no obstante, es más que obvio que este número irá creciendo!!
¿Qué ganamos los desarrolladores web utilizando esta aplicación?
- Ahorraremos tiempo en transferencia
- Ganaremos en velocidad de carga de la página
- Podremos utilizar distintas familias de tipografías en una misma página web, pero ojo!! que esto no signifique que vayamos a dejar de lado la estética y la usabilidad de una web.
¿Cómo uso estas fuentes del Google Font Directory?
Es tan sencillo como hacer una llamada a una hoja de estilos que Google habrá creado y publicado en Internet. O lo que es lo mismo, copiar esta línea de código en el <head> de nuestra página:
Donde deberemos cambiar tan sólo el dato referente a el nombre de la fuente o "Font+Name, por ejemplo si queremos untilizar la fuente Cantarell ecribiremos: <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'> Más fácil todavía! desde el Google Font Directory podremos obtener el código directamente pulsando en "Get Code" dentro de la previsualización de la fuente: Un tip!! Si queremos sintetizar el código cuando vayamos a utilizar más de una fuente lo podemos expresar así en tan sólo una línea de código:<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">
Y básicamente es todo lo que hay que hacer. La verdad es que es sencillo y ventajoso. :)
Compartir
hola me gusto mucho su pagina, los tutoriales son muy buenos, usare muchos de ellos para mi sitio, que por cierto estoy haciendo jejeje saludos desde cancun, mexico