Come ospitare font web di Google sul mio server?

Devo utilizzare alcuni caratteri Google su un'applicazione Intranet. I clienti possono o meno disporre di una connessione Internet. Leggendo le condizioni di licenza, sembra che sia legalmente consentito.

Tieni presente che la mia risposta è invecchiata molto.

Di seguito sono disponibili altre risposte tecnicamente più sofisticate, ad esempio:

• neverpanic / google-font-download
• google-webfont-helper
• localfont

quindi non lasciare che il fatto che questa sia la risposta attualmente accettata ti dia l'impressione che questa sia ancora la migliore.

Ora puoi anche scaricare l'intero set di caratteri di google tramite su github nel loro repository google / font . Forniscono anche un'istantanea zip di ~ 420 MB dei loro caratteri .

Prima devi scaricare la selezione dei caratteri come pacchetto compresso, fornendo così un sacco di caratteri di tipo vero. Copiali da qualche parte pubblici, da qualche parte a cui puoi collegarti dal tuo css.

Nella pagina di download di google webfont troverai un link Includi in questo modo:

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

Si collega a un CSS che definisce i caratteri tramite una serie di @font-facedefinizioni.

Aprilo in un browser per copiarli e incollarli nel tuo CSS e modificare gli URL per includere il giusto file di font e tipi di formato.

Così questo:

@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');
}

diventa questo:

/* 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');
}

Come puoi vedere, un aspetto negativo dell'hosting dei caratteri sul tuo sistema in questo modo è che ti limiti al vero formato del tipo, mentre il servizio webfont di google determina dal dispositivo di accesso quali formati verranno trasmessi.

Inoltre, ho dovuto aggiungere un .htaccessfile alla mia directory contenente i tipi di carattere contenenti i tipi mime per evitare che errori compaiano in Chrome Dev Tools.

Per questa soluzione, è necessario solo il tipo vero, ma definire di più non fa male quando si desidera includere anche caratteri diversi, come font-awesome.

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

C'è uno strumento localfont.com per aiutarti a scaricare tutte le varianti di font. Inoltre genera il CSS corrispondente per l'implementazione. deprecato

localfont non funziona. Invece, come suggerisce Damir , puoi usare google-webfonts-helper

Ottima soluzione è google-webfonts-helper .

Ti consente di selezionare più di una variante di carattere, il che consente di risparmiare molto tempo.

Ho scritto uno script bash che recupera il file CSS sui server di Google con diversi agenti utente, scarica i diversi formati di carattere in una directory locale e scrive un file CSS che li include. Si noti che lo script richiede Bash versione 4.x.

Vedi https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ per lo script (non lo sto riproducendo qui quindi devo solo aggiornarlo in un posto quando ne ho bisogno).

Modifica: spostato su https://github.com/neverpanic/google-font-download

Il contenuto del file CSS (dall'URL include) dipende dal browser da cui lo visualizzo. Ad esempio, quando si accede a http://fonts.googleapis.com/css?family=Open+Sans utilizzando Chrome, il file conteneva solo collegamenti WOFF. Utilizzando Internet Explorer (di seguito), includeva sia EOT che WOFF. Ho incollato tutti i collegamenti nel mio browser per scaricarli.

@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');
}

Quando si ospitano i propri caratteri Web, è necessario collegarsi correttamente a ciascun tipo di carattere , gestire i bug del browser legacy, ecc. Quando si utilizzano i caratteri Web di Google (ospitati da Google), Google si collega automaticamente ai tipi di carattere corretti per quel browser.

È legalmente consentito purché si rispettino i termini della licenza del carattere, di solito OFL.

Avrai bisogno di un set di formati di font web e Font Squirrel Webfont Generator può produrli.

Ma OFL ha richiesto la ridenominazione dei caratteri se modificati, e l'utilizzo del generatore significa modificarli.

Ho uno script scritto in PHP simile a quello di @neverpanic che scarica automaticamente sia Google che i caratteri ( sia accennati che non accennati ) da Google. Fornisce quindi i CSS e i caratteri corretti dal proprio server in base all'agente utente. Mantiene la propria cache, quindi i caratteri e i CSS di un User Agent verranno scaricati solo una volta.

È in una fase prematura, ma può essere trovato qui: DaAwesomeP / php-offline-fonts

Se desideri ospitare tutti i caratteri (o alcuni di essi) sul tuo server, scarichi i caratteri da questo repository e utilizzali nel modo che preferisci: https://github.com/praisedpk/Local-Google-Fonts

Se desideri semplicemente eseguire questa operazione per risolvere il problema di memorizzazione nella cache del browser che viene fornito con Google Fonts, puoi utilizzare CDN di caratteri alternativi e includere i caratteri come:

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

O un carattere specifico, come:

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

Ho usato grunt-local-googlefont in un'attività grunt.

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');
 };

Quindi, per recuperarli:

grunt local-googlefont:opensans

Nota, sto usando un fork dall'originale, che funziona meglio quando recuperi caratteri con spazi bianchi nei loro nomi.

Puoi effettivamente scaricare tutte le varianti di formato dei caratteri direttamente da Google e includerle nei tuoi CSS per essere pubblicate dal tuo server. In questo modo non devi preoccuparti del monitoraggio di Google da parte degli utenti del tuo sito. Tuttavia, il rovescio della medaglia potrebbe rallentare la propria velocità di servizio. I caratteri sono piuttosto impegnativi per le risorse. Non ho ancora fatto alcun test in questo numero e mi chiedo se qualcuno abbia pensieri simili.

La mia soluzione era quella di scaricare i file TTF dai font web di Google e quindi utilizzare onlinefontconverter.com .

Ho creato un minuscolo script PHP per ottenere collegamenti per il download da un URL di importazione CSS di Google Fonts come: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Puoi usare questo strumento qui: http://nikoskip.me/gfonts.php

Ad esempio, se usi l'URL di importazione sopra riportato, otterrai questo:

Se stai usando Webpack, potresti essere interessato a questo progetto: https://github.com/KyleAMathews/typefaces

Ad esempio dire che si desidera utilizzare il carattere Roboto:

npm install typeface-roboto --save

Quindi importalo nel punto di accesso della tua app (file js principale):

import 'typeface-roboto'

Puoi seguire lo script sviluppato utilizzando PHP. Dove è possibile scaricare qualsiasi tipo di carattere Google utilizzando lo script. Scaricherà i caratteri e creerà un file CSS e un archivio per comprimerlo.
Puoi scaricare il codice sorgente da 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>";
        } 
    } 
}

Oltre a k0pernicus, vorrei suggerire il miglior servizio locale . È anche uno script bash (v4) per consentire agli operatori del server web di scaricare e servire i caratteri web di Google dal proprio server web. Ma oltre all'altro script bash, consente all'utente di automatizzare completamente (tramite cron e simili) la pubblicazione di file di font e css-file aggiornati.

Esiste uno script molto semplice, scritto in semplice Java, per scaricare tutti i caratteri da un collegamento Google Web Font (più caratteri supportati). Inoltre scarica il file CSS e lo adatta ai file locali. L'utente-agente può essere adattato per ottenere anche altri file oltre a WOFF2. Vedi https://github.com/ssc-hrep3/google-font-download

I file risultanti possono essere facilmente aggiunti a un processo di compilazione (ad esempio un build simile a un webpack vue-webpack).

Puoi scaricare i font di origine da https://github.com/google/fonts

Successivamente, utilizzare lo font-rangerstrumento per dividere il carattere Unicode di grandi dimensioni in più sottoinsiemi (ad esempio latino, cirillico). Si dovrebbe fare quanto segue con lo strumento:

• Genera sottoinsiemi per ogni lingua supportata
• Utilizzare il sottoimpostazione dell'intervallo unicode per salvare la larghezza di banda
• Rimuovi il bloat dai tuoi caratteri e ottimizzali per il web
• Converti i tuoi caratteri in un formato compresso woff2
• Fornire .woff fallback per browser meno recenti
• Personalizza il caricamento e il rendering dei caratteri
• Genera file CSS con le regole @ font-face
• Font web self-host o utilizzali localmente

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

PS Puoi anche automatizzare questo usando l'API Node.js