Como obtener la lista de fuentes de Google y almacenarlas en cache local

Como obtener la lista de fuentes de Google y almacenarlas en cache localLa colección de web fonts de Googlees, 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 APIpara 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.

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»:
Lista de APIs en Google Developer Console
Ahora, habilita el 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

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 = 'AQUI VA TU CLAVE';
    //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] => 2019-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 ( ... )
)

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>


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-11
  • Categorias: Google Diseño Web @font-face Lenguajes De Programacion php WebSite webmasters Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!