Las posibilidades de lucirnos en nuestros diseños web mediante las fuentes se han extendido enormemente con Google Fonts. Aún así, muchos diseñadores aún no se animan a aplicarlas por desconocer el simple proceso que hay que realizar o bien por no poder utilizarlas en forma local para ir previsualizando el resultado.
Como visualizar las fuentes de Google en mi PC?
Lo primero que debemos hacer es descargar el programa SkyFonts e instalarlo. Este nos permitirá trabajar con las fuentes de Google en nuestra PC.
Para esto, una vez instalado el programa, lo abrimos y veremos la siguiente pantalla inicial:
Seleccionamos Google Fonts y vamos a “Fonts” ubicado en el menú superior. Por lo visto, aún no tenemos ninguna. Es hora de volver al sitio desde donde descargamos el programa.
Alí presionamos el botón “Browse Google Fonts” y nos mostrará el listado en orden alfabético de todas las fuentes que dispone Google. Bastará con buscar la fuente que deseamos utilizar, presionar sobre el botón “Skyfonts” ubicado a su derecha y finalizar con el botón “Add” la acción.
Si volvemos al programa SkyFonts, veremos que la fuente ya aparece allí, por lo que la podremos encontrar en todos nuestros programas para utilizarla en forma local.
En verdad no es necesario tener ir al programa SkyFonts para hacer el proceso e incorporar la fuente a nuestra PC, solo sirve para gestionarlas, en el caso que luego querramos desinstalarlas.
Visto en BlogVecindad
Como hago para incorporar Google Fonts a mi sitio?
En realidad es muy simple. Google pone a disposición el código y los ejemplos necesarios para que el incorporar Google Fonts a nuestro sitio sea un trámite de minutos.
Una vez ubicada la fuente en Google Fonts deberán seleccionar el icono “Quick-Use” para pasar a la pantalla en donde te explicará diversas formas de incorporarlo.
Visto en Geek´s Room
NOTA: Importante comentario de Federico aportando datos para una mejor implementación de Google Fonts a un website. Ver aquí.
Gracias a vos Diego por este maravilloso espacio en el que como dice Juan Manuel, nunca nos cansamos de aprender!
Una adición más. Algunos efectos de texto pueden ser ya generados mediante la API de google fonts. Acá unos ejemplos: https://developers.google.com/fonts/docs/getting_started
Saludos!
Fantastico. Gracias!
Hola Diego, el blog está excelente, cada día mejor!
Como comentario adicional, añadiría que se preste especial atención a la font seleccionada en particular antes de emplearla así como así.
Digo esto porque, como desarrollador, yo suelo recibir PSDs para maquetar, y muchas veces la aplicación que hacen los diseñadores de la fuente de google NO es la adecuada.
Google te ofrece una font, y una serie de parámetros para utilizarla. Al seleccionar allí la fuente (en google.com/fonts) puedes ver los tamaños para esa fuente disponibles y los estilos permitidos para la misma. Así también, al seleccionar el tamaño y estilo deseado se puede visualizar COMO REALMENTE SE VERA ESA FUENTE EN LA WEB.
Luego, los diseñadores y nuestro gran amigo photoshop, pueden hacer que esa fuente se vea genial en los diseños, añadiendo por ejemplo efectos de redondeado, variando el tamaño a placer mediante herramientas como la transformación libre, etc, Pero esto luego en la web se verá reflejado de otro modo.
Por lo tanto al utilizar una de estas fuentes, hay que prestar especial atención a cuál será la salida final de esa tipografía en la web, ya que modificaciones leves que pueden hacer que en psd suelen traducirse en una gran perdida de calidad a nivel web.
Un ejemplo práctico: La fuente Advent Pro en normal (weight:400) a 12 px es prácticamente ilegible en web. Pero al utilizarla en photoshop con un efecto redondeado queda simplemente genial.
Saludos
Excelente comentario Federico. Vamos a agregar un enlace al final del articulo hacia el mismo ya que suma muchisimo.
Gracias por compartir tu experiencia!
Siempre se aprende en este blog, Diego, solo tengo una palabra “Gracias” yo no soy diseñador profesional, es mas bien un hobby, ( no vivo de esto, lo digo para que no se ofendan lo que si lo hacen ) pero no por ser un hobby me lo tomo asi como asi, trato de estar al tanto de “todo” y de aprender lo mas que pueda, tanto el blog, como el comentario de Federico, me enseñan,a ambos muchas gracias
Fantastico Juan Manuel, es el objetivo de este blog. Saludos!
Como siempre gracias por compartir, pero tengo una observación aquí, y es: ¿Para qué instalar una aplicacion cuando esto lo puedes hacer manual?.
Yo trabajo con Google Fonts directamente en mi PC, las utilizo bastante para diseño web, solo las descargo e instalo en Windows, claro un proceso manual, pero resuelve y muy bien.
Diego no hago este comentario para ofender, insultar ni molestar, es solo una duda que saltó a mi mente al leer el articulo.
Saludos y Bendiciones
Hola, nada ofende amigo en esto. Son opiniones y todo suma. En mi caso prefiero un sistema de gestión para visualizar e instalar una fuente seleccionada que reventar la máquina con cientos de fuentes instaladas en la misma. Pero es cuestión de gustos. No esta bien ni mal una u otra opción.
Saludos!