Como utilizar la API de Google Font

Stay hungry, stay foolish

Steve Jobs

De seguro ya hemos leido del Google Font Directory, el cual contiene un colección de fuentes gratuitas que podemos utilizar en nuestros sitios web. Pero veamos como podemos implementarlas atravez con la API de google font.

Lo primero que necesitamos es escoger la fuente que vamos a utilizar y obtener el link de la fuente, este lo podemos encontrar en el directorio de fuentes de google y lo vamos a colocar dentro de la etiqueta <head>

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


Ahora hay que agregar la fuente en nuestro CSS, por ejemplo en el selector h1

h1 { font-family: 'Lobster', arial, serif; }

y asi de facil podemos utilizar las fuentes de google.

Codigo

<html>
  <head>
    <link href="http://fonts.googleapis.com/css?family=Lobster" rel='stylesheet' type='text/css'>
    <style>
        h1 { font-family: 'Lobster', arial, serif; }
    </style>
  </head>
  <body>
    <h1> Code Drinks </h1>
  </body>
</html>