¿Google Web Fonts? ¿Comic Sans? Pero de que está hablando este tío. Si no sabes de lo que estoy hablando, ¡enhorabuena, tienes vida social y puedes regresar a tus quehaceres diarios! Ahora bien, si entiendes mi jerga, tengo dos noticias para ti:
1. La mala: ¡Eres un friki!
2. La buena: Muy posiblemente estés orgullos de ello, así que vamos con lo que te ha traído hasta aquí: 7 tipografías de Google Web Fonts para no volver a usar Comic Sans en la vida.
Pero antes de listar las 7 tipografías que darán sepultura de una vez por todas a la tan odiada Comic Sans, dejame que explique muy brevemente qué son las Google Fonts, por si contamos con algún despistado en nuestras filas.
Google Web Fonts es un repositorio de fuentes que puedes usar en tu Blog o Página Web en lugar de utilizar las “Web Safes”. Estas últimas son las fuentes que interpretan por defecto la mayoría de navegadores y sistemas operativos. Pero como nos estamos volviendo un poco exquisitos en la Internete pues se han ideado varias formas de diseñar una Web con tipografías diferentes (y en principio mejores) a las “Web Safes”.
Uno de los servicios que permite añadir tipografías a tu Blog o Página Web para utilizarlas en tus diseños es Google Web Fonts, que cuenta con un repertorio de más de 600 fuentes. Como probarlas todas es un coñazo te voy a proponer las más populares junto con el “código necesario” para que se muestren correctamente en tu Blog.
7 Google Google Fonts para diseñar tu Blog o Página Web
Open Sans
Para usar Open Sans o cualquier otra de las Google Fonts que voy a listar tienes que hacer lo siguiente:
1. Ir a Google Fonts y seleccionar al tipografía deseada. Como no podía ser de otra manera, Google Web Fonts dispone de un buscador y un filtro de criterios para buscar la tipografía adecuada para cada siuación.
2. Seleccionas la tipografía, en este caso Open Sans, y hacer click en el botón Quick Use (uso rápido).
3. Tienes que copiar el código que te indica Google Web Fonts en la cabecera de tu Blog o Página Web (entre las etiquetas
header).
4. Asignar la tipografía elegida a los elementos de tu Blog. Por ejemplo al encabezado H1, tal como se muestra en la siguiente imagen:
Ahora que ya has visto como se utilizan las Google Web Fonts vamos a ver las otras 6 tipografías que considero muy recomendables.
Source Sans Pro
Un ejemplo de uso:
Ver la fuente Source Sans Pro »
Lato
Un ejemplo de uso:
Rokkitt
Un ejemplo de uso:
Cutive
Un ejemplo de uso:
Dosis
Un ejemplo de uso:
Bitter
Un ejemplo de uso:
¡Espero que te hayan gustado! Recuerda que hay más de 600 diferentes, y por supuesto compártelo en Twitter y Google+ para que entre todos consigamos terminar de una vez por todas con la maldita Comic Sans.
¿Tú qué opinas?. Ya hay 9 Comentarios
caro chan ya está participando.
Lo he entendido todo, y se como hacerlo, no me he sentido mas orgullosa de mi en mi vida!!(Soy una pequeña friki wuajajassss)
Confeti!!
Thanks!!!
Marcos Villauriz ya está participando.
Caro,
ya no hay vuelta atrás. ¡Eres una friki y lo sabes!
Isabel Eraña ya está participando.
Como siempre, excelentes artículos y consejos, estoy aprendiendo mucho contigo, gracias!!
Marcos Villauriz ya está participando.
Un placer, Isabel.
Marcos ya está participando.
Hola Marcos, estoy estudiando fuentes y he recordado este post y como me encanta tu contenido y maquetado del mismo, me gustaría usar la misma fuente. ¿Qué tipo de letra usas en el contenido y títulos?
Gracias de antemano.
Marcos Villauriz ya está participando.
Hola,
La fuente es “Proxima Nova”. La uso con typekit.com
Saludos.
Vita ya está participando.
¡Muy interesante Marcos!, pero mi duda… Tengo un blog en WordPress con un tema gratuito, y soy incapaz de encontrar dónde poder hacer lo que explicas aquí. Y además, dentro de las fuentes que me da la opción de escoger el WordPress en ese tema, pongo las que me interesan, se previsualiza muy bien, y cuando se publica sigue igual que anteriormente… ¿Cómo es que si lo previsualiza bien luego no se ve correctamente al abrir el blog en Chrome? … Siempre me sale la misma fuente horrenda… “Mi no entender” ;-( Thanks!!!!
Marcos Villauriz ya está participando.
Hola,
Un duda: ¿estás usando el plugin de Google Fonts o sólo la plantilla gratuita?
Saludos.
Vita ya está participando.
No, sólo la plantilla gratuita, porque no me deja instalar plugins en WordPress.com