¿Cómo alojar fuentes web de Google en mi propio servidor?

Necesito usar algunas fuentes de google en una aplicación de intranet. Los clientes pueden o no tener conexión a internet. Al leer los términos de la licencia, parece que está legalmente permitido.

Tenga en cuenta que mi respuesta ha envejecido mucho.

Hay otras respuestas más sofisticadas técnicamente a continuación, por ejemplo:

• neverpanic / google-font-download
• google-webfont-helper
• fuente local

así que no dejes que el hecho de que esta sea la respuesta aceptada actualmente te dé la impresión de que sigue siendo la mejor.

Ahora también puede descargar todo el conjunto de fuentes de google a través de github en su repositorio de google / font . También proporcionan una instantánea zip ~ 420MB de sus fuentes .

Primero descarga su selección de fuente como un paquete comprimido, que le proporciona un montón de fuentes de tipo verdadero. Cópielos en algún lugar público, en algún lugar al que pueda vincular desde su CSS.

En la página de descarga de google webfont, encontrará un enlace de inclusión como este:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

Se vincula a un CSS que define las fuentes a través de un montón de @font-facedefiniciones.

Ábralo en un navegador para copiarlos y pegarlos en su propio CSS y modifique las URL para incluir el archivo de fuente y los tipos de formato correctos.

Así que esto:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

se convierte en esto:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

Como puede ver, una desventaja de alojar las fuentes en su propio sistema de esta manera es que se restringe al formato de tipo verdadero, mientras que el servicio google webfont determina por el dispositivo de acceso qué formatos se transmitirán.

Además, tuve que agregar un .htaccessarchivo a mi directorio que contenía las fuentes que contenían tipos MIME para evitar que aparecieran errores en Chrome Dev Tools.

Para esta solución, solo se necesita el tipo verdadero, pero definir más no hace daño cuando también desea incluir diferentes fuentes, como font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Hay una herramienta localfont.com para ayudarlo a descargar todas las variantes de fuente. También genera el CSS correspondiente para la implementación. obsoleto

localfont está caído. En cambio, como sugiere Damir , puede usar google-webfonts-helper

La gran solución es google-webfonts-helper .

Le permite seleccionar más de una variante de fuente, lo que ahorra mucho tiempo.

Escribí un script bash que recupera el archivo CSS en los servidores de Google con diferentes agentes de usuario, descarga los diferentes formatos de fuente a un directorio local y escribe un archivo CSS que los incluye. Tenga en cuenta que el script necesita Bash versión 4.x.

Consulte https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ para ver el script (no lo estoy reproduciendo aquí, así que solo tengo que actualizarlo en un lugar cuando lo necesito).

Editar: movido a https://github.com/neverpanic/google-font-download

El contenido del archivo CSS (de la URL de inclusión) depende del navegador desde el que lo veo. Por ejemplo, al navegar a http://fonts.googleapis.com/css?family=Open+Sans usando Chrome, el archivo solo contenía enlaces WOFF. Usando Internet Explorer (abajo), incluyó EOT y WOFF. Pegué todos los enlaces en mi navegador para descargarlos.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Cuando aloja sus propias fuentes web, debe vincular correctamente a cada tipo de fuente , tratar los errores del navegador heredados, etc. Cuando utiliza las fuentes web de Google (alojadas por Google), Google se vincula automáticamente a los tipos de fuente correctos para ese navegador.

Está legalmente permitido siempre que cumpla con los términos de la licencia de la fuente, generalmente la OFL.

Necesitará un conjunto de formatos de fuente web, y Font Squirrel Webfont Generator puede producirlos.

Pero la OFL requería cambiar el nombre de las fuentes si se modificaban, y usar el generador significa modificarlas.

Tengo un script escrito en PHP similar al de @neverpanic que descarga automáticamente tanto el CSS como las fuentes ( tanto insinuadas como no insinuadas ) de Google. Luego sirve el CSS correcto y las fuentes de su propio servidor basado en el Agente de usuario. Mantiene su propio caché, por lo que las fuentes y CSS de un agente de usuario solo se descargarán una vez.

Está en una etapa prematura, pero se puede encontrar aquí: DaAwesomeP / php-offline-fonts

Como desea alojar todas las fuentes (o algunas de ellas) en su propio servidor, descargue las fuentes de este repositorio y úselas de la manera que desee: https://github.com/praisedpk/Local-Google-Fonts

Si solo desea hacer esto para solucionar el problema de almacenamiento en caché del navegador que viene con Google Fonts, puede usar fuentes alternativas CDN e incluir fuentes como:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

O una fuente específica, como:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

Solía ronco-local-googlefont en una tarea ronco.

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

Luego, para recuperarlos:

grunt local-googlefont:opensans

Tenga en cuenta que estoy usando una bifurcación del original, que funciona mejor al recuperar fuentes con espacios en blanco en sus nombres.

En realidad, puede descargar todas las variantes de formato de fuente directamente desde Google e incluirlas en su CSS para servir desde su servidor. De esa manera, no tiene que preocuparse de que Google rastree a los usuarios de su sitio. Sin embargo, la desventaja puede ralentizar su propia velocidad de servicio. Las fuentes son bastante exigentes en recursos. Todavía no he hecho ninguna prueba en este tema, y ​​me pregunto si alguien tiene pensamientos similares.

Mi solución fue descargar los archivos TTF de las fuentes web de Google y luego usar onlinefontconverter.com .

Hice un pequeño script PHP para obtener enlaces de descarga de una URL de importación CSS de Google Fonts como: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Puede usar esta herramienta aquí: http://nikoskip.me/gfonts.php

Por ejemplo, si usa la URL de importación anterior, obtendrá esto:

Si está utilizando Webpack, podría estar interesado en este proyecto: https://github.com/KyleAMathews/typefaces

Por ejemplo, di que quieres usar la fuente Roboto:

npm install typeface-roboto --save

Luego simplemente impórtelo en el punto de entrada de su aplicación (archivo js principal):

import 'typeface-roboto'

Puede seguir el script desarrollado con PHP. Donde puede descargar cualquier fuente de Google utilizando el script. Descargará las fuentes y creará un archivo CSS y archivará en zip.
Puede descargar el código fuente desde GitHub https://github.com/sourav101/google-fonts-downloader

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

Además de k0pernicus, me gustaría sugerir el local mejor servido . También es un script bash (v4) para permitir que los operadores de servidores web descarguen y sirvan las fuentes web de Google desde su propio servidor web. Pero además del otro script bash, permite al usuario automatizar completamente (a través de cron y tal) el servicio de archivos de fuente actualizados y archivos css.

Hay una secuencia de comandos muy simple, escrita en Java simple, para descargar todas las fuentes desde un enlace de fuente web de Google (se admiten varias fuentes). También descarga el archivo CSS y lo adapta a los archivos locales. El agente de usuario se puede adaptar para obtener también otros archivos además de WOFF2. Ver https://github.com/ssc-hrep3/google-font-download

Los archivos resultantes se pueden agregar fácilmente a un proceso de compilación (por ejemplo, una compilación de paquete web vue-webpack).

Puede descargar fuentes de origen desde https://github.com/google/fonts

Después de eso, use la font-rangerherramienta para dividir su fuente Unicode grande en múltiples subconjuntos (por ejemplo, latín, cirílico). Debe hacer lo siguiente con la herramienta:

• Genere subconjuntos para cada idioma que admita
• Utilice el subconjunto de rango unicode para ahorrar ancho de banda
• Elimine la hinchazón de sus fuentes y optimícelas para la web
• Convierta sus fuentes a un formato comprimido woff2
• Proporcionar respaldo de .woff para navegadores antiguos
• Personaliza la carga y el renderizado de fuentes
• Generar archivo CSS con reglas @ font-face
• Fuentes web autohospedadas o úselas localmente

Font-Ranger : https://www.npmjs.com/package/font-ranger

PD: También puede automatizar esto usando la API Node.js