La colección de web fonts de Google es, además de gratis, realmente grande. Se pueden cargar directamente en una página web mediante un enlace a googleapis y utilizando luego la propiedad font-family en las reglas CSS:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
font-family: 'Open Sans';

Además, Google Fonts ofrece un API para desarrolladores que permite obtener la lista de todas las fuentes disponibles para trabajar de forma local. Este API es muy utilizada en muchos temas para WordPress para mostrar una lista de la que el usuario pueda elegir la fuente que desea utilizar.

El API de Google Font es gratis hasta 10.000 mil solicitudes al día. Esto son un montón de solicitudes pero si la utilizas en varios productos públicos puede ser que lo superes fácilmente. En este tutorial vamos a ver como obtener la lista de fuentes de Google Fonts y almacenar la lista de forma local durante un tiempo determinado, es decir, crear una cache.

1

Obtener un API key

Accede a Google Developer Console con tu cuenta de Google y crea un nuevo proyecto. Entra en este proyecto y ve al menú “APIs y autenticación → APIs”. En la pantalla que aprece, ve al apartado “Otros APIs” y haz clic sobre “Web Fonts Developer API”:

APIs en Google Developer Console
Lista de APIs en Google Developer Console

Ahora, habilita el API:

Habilitar Google Font API
Habilitar Google Font API

Finalmente, sin salir del proyecto en el que acabas de habilitar Google Font API, muevete al menú “APIs y autenticación → Credenciales”. En esta pantalla podrás crear una Clave de API. Cuándo aparezca la opción, elige “Clave de Servidor”:

Crear API key Google Developers
Crear API key Google Developers

2

Obtener la lista de fuentes y almacenarlas en un archivo

Ahora que ya tenemos activa la API de Google Fonts y un key de acceso, podemos utilizar la siguiente función para obtener la lista de fuentes. La función acepta un parámetro, $amount, en el que puedes establecer el número de fuentes que quieres obtener. Si las quieres todas utiliza el valor "all".

También puedes configurar el tiempo de cache, puesto por defecto en 30 días. Durante este tiempo no se realizará una nueva solicitud a Google Fonts API sino que se utiliza la lista de fuentes almacenada en el archivo local. Recuerda poner tu API Key, obtenida en el paso anterior, como valor de la variable $APIKey:

/**
 * Get google fonts
 * @param mixed $amount - integer amount of fonts to get. String "all" to get all the fonts
 * @return Array of fonts
*/
function get_google_fonts( $amount = 30 ) {

    //File to cache the fonts list
    $fontFile = 'google-web-fonts.txt';
    //Replace by your public API Key
    $APIKey = 'xxxxxx';
    //Total time the file will be cached in seconds, set to a 30 days (86400 seonds is a day)
    $cachetime = 1;

    if( file_exists($fontFile) && time() - $cachetime < filemtime($fontFile) ) {
        $content = json_decode(file_get_contents($fontFile));
    } else {
        $googlefontsurl = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key='.urlencode($APIKey);
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($ch, CURLOPT_HEADER, false);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_setopt($ch, CURLOPT_URL, $googlefontsurl);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

        $fontContent = curl_exec($ch);

        curl_close($ch);

        $fp = fopen($fontFile, 'w');
        fwrite($fp, $fontContent); 
        fclose($fp);
 
        $content = json_decode($fontContent);

    }

    if( $amount == "all" ) {
        return $content->items;
    } else {
        return array_slice($content->items, 0, $amount);
    }

}

El array devuelto tiene la forma:

Array (
    [0] => stdClass Object (
        [kind] => webfonts#webfont
        [family] => Open Sans
        [category] => sans-serif
        [variants] => Array (
            [0] => 300
            [1] => 300italic
            [2] => regular
            [3] => italic
            [4] => 600
            [5] => 600italic
            [6] => 700
            [7] => 700italic
            [8] => 800
            [9] => 800italic
        )
        [subsets] => Array (
            [0] => vietnamese
            [1] => greek-ext
            [2] => cyrillic-ext
            [3] => greek
            [4] => devanagari
            [5] => latin-ext
            [6] => latin
            [7] => cyrillic
        )
        [version] => v10
        [lastModified] => 2014-10-17
        [files] => stdClass Object (
            [300] => http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTS3USBnSvpkopQaUR-2r7iU.ttf
            [300italic] => http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxi9-WlPSxbfiI49GsXo3q0g.ttf
            [regular] => http://fonts.gstatic.com/s/opensans/v10/IgZJs4-7SA1XX_edsoXWog.ttf
            [italic] => http://fonts.gstatic.com/s/opensans/v10/O4NhV7_qs9r9seTo7fnsVKCWcynf_cDxXwCLxiixG1c.ttf
            [600] => http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSi3USBnSvpkopQaUR-2r7iU.ttf
            [600italic] => http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxpZ7xm-Bj30Bj2KNdXDzSZg.ttf
            [700] => http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzC3USBnSvpkopQaUR-2r7iU.ttf
            [700italic] => http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxne1Pd76Vl7zRpE7NLJQ7XU.ttf
            [800] => http://fonts.gstatic.com/s/opensans/v10/EInbV5DfGHOiMmvb1Xr-hi3USBnSvpkopQaUR-2r7iU.ttf
            [800italic] => http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxg89PwPrYLaRFJ-HNCU9NbA.ttf
        )
    [1] => stdClass Object ( ... )
)
3

Ejemplo de uso: construir un select para seleccionar una fuente

<?php

$fonts = get_google_fonts("all");

?>
<label>Seleeciona una fuente</label>
<select>
    <?php
    foreach ( $fonts as $k => $v ) {
        printf('<option value="%s">%s</option>', $v->family, $v->family);
    }
    ?>
</select>
  • Sergio Santiago Castro Vidal

    Hola esta genial el articulo XD, pero tengo problemas para conseguir la key, ¿puedes guiarme un poco? D:

    • Por supuesto. ¿Dónde exactamente tienes problemas?

      PD: He actualizado el post con nuevas imágenes e instrucciones (el Google Developers Console había cambiado un poco desde que escribí el post).