Google Fonts

Google Fonts es un es un repositorio on line de fuentes gratuitas que permite incluir tipografías de todo tipo a una web.

botero

archivado en: HTML/CSS / 8 septiembre, 2012

Hasta hace poco, la tipografía era la gran bestia negra del diseño web. Como dependía del ordenador cliente, el espectro de las fuentes que se podían emplear con seguridad estaba reducido a las que venían por defecto en los ordenadores domésticos, como la Arial, la Times, etcétera. Sin embargo, ahora existen dos maneras para incluir las fuentes que se necesiten: una es mediante el sistema de Google Fonts, que veremos en este artículo, y otra mediante una regla de CSS llamada @font-face, que trataré en el siguiente.

Google Fonts es un repositorio de fuentes gratuitas que cuenta ya con más de 500 familias. Para usar una basta con seguir los siguientes pasos:

1) Una vez localizada la que nos interesa, se selecciona pulsando el botón Quick-use:

[singlepic id=2 w=600 h=404 float=center]

2) En la página que se abre otra página a continuación indicamos si queremos añadir algunas variantes de la fuente  (negritas y cursivas).  Como a mayor información, más tardará en descargarse en el ordenador del usuario, a no ser que necesites una precisión absoluta en la definición de los subestilos, que no suele ser el caso, basta con seleccionar la normal.

Además, en esa página se puede escoger el juego de caracteres que se necesite. Si tu web estará escrita en español, basta con el latín normal, que incluye la ñ, y pesa mucho menos.

3) Una vez definidos el estilo y el juego de caracteres, en un tercer recuadro aparece un código similar a este:

<link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/css'>

Hay que ponerlo en la cabecera de la web, entre las etiquetas <head></head> y ya se puede usar en cualquier selector CSS poniéndolo entre comillas simples

selector {
font-family:'Metrophobic', Arial, serif;
}

Por ejemplo:

h1 {
font-family: 'Skranji', Arial, serif; font-weight: 400;
}

El nombre exacto de la fuente es el que aparece en el epígrafe 4 de la página, pero también puedes identificarlo si se te ha olvidado copiarlo seleccionando el que aparece después del signo =

family=Skranji

¿Sencillo, no?

Bonus: Hay una web muy chula llamada font-combinator con la que puedes ir viendo cómo quedarían distintas combinaciones de fuentes de Google. Muy práctica si vas con prisa.

Bonus II: Hay un plugin para WordPress que permite incorporar las fuentes de Google: el WP Google Fonts de Adrian Hanft

 

|| Tags: , , , ,

valoración de los lectores sobre Google Fonts

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (9 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “Google Fonts

  1. Eovi el dijo:

    Muchas gracias por tu aporte, me sirvió de mucho, al igual que el resto de tus artículos.