Come ospitare font web di Google sul mio server?


271

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.


6
Quello che capisco è che non è semplice come scaricare un file e salvarlo. Ogni browser supporta un formato di carattere diverso e google non fornisce un modo diretto e semplice per ottenere tutti i file necessari in modo che il carattere funzioni correttamente in tutti i browser.
Samarth Bhargava,

1
Ottieni tutti gli URI dal foglio di stile collegato.
fuxia,

38
Sì, posso capire da solo tutti i dettagli, oppure posso fare una domanda per vedere se qualcuno lo ha già fatto e ha esperienze e script da condividere
Samarth Bhargava,

2
Bene, google restituisce risposte diverse in fonts.googleapis.com/css?base alle intestazioni UA (leggi: il tuo browser) ➝ Quindi forniscono solo ciò di cui ha bisogno il browser corrente. Se si desidera ottenere tutti i caratteri necessari (o anche solo gli URL), saranno necessari più carichi del file CSS da diversi browser. con diverse intestazioni forgiate, per ottenere tutto ciò che è necessario.
Frank Nocke,

Risposte:


218

Tieni presente che la mia risposta è invecchiata molto.

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

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

37
Non sei limitato a TrueType, devi solo scaricare anche i file .woff, ad es. inserisci "http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff" nel tuo browser web, salvalo come "/fonts/Cantarell-Bold.woff" e aggiorna il css da abbinare (url ('/ fonts / Canterell-Bold.woff'))
Anthony Briggs,

2
C'è un motivo per cui Google fornisce diversi formati di caratteri: TrueType non funziona con i vecchi browser . WOFF è lo standard W3C.
Michael McGinnis,

3
Scorri verso il basso fino alla soluzione di script bash - fantastico!
Dr. Max Völkel,

3
Il file cambia contenuto a seconda del browser utilizzato.
Krii,

3
Questa risposta è più complessa da implementare rispetto alle alternative elencate di seguito; è anche tecnicamente errato sotto diversi aspetti (nessuna limitazione al TTF, il TTF è una cattiva idea, questo produrrà risultati diversi per browser, non è possibile ospitare caratteri ovunque pubblici poiché si applica la stessa origine). Per favore non farlo, usa una delle altre risposte qui sotto.
Robin Berjon,

202

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



Anche se fantastico, quando ti occorrono versioni in altre lingue del tuo carattere, devi trovare un'altra soluzione
anges244,

Che dire di diversi set di caratteri?
Vitro,

1
Qui lo sviluppatore di Google afferma che l'hosting dei font di Google ha i suoi svantaggi , invece controlla questi suggerimenti per utilizzare il font CDN di Google e aumentare la velocità della pagina.
Shaijut,

@PauloCoghi Lo strumento potrebbe segnalare che il sito Web è raggiungibile ma chiaramente c'è qualcosa di sbagliato poiché io e molti altri non siamo in grado di vederlo.
Lawyerson,

148

Ottima soluzione è google-webfonts-helper .

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


Grandi strumenti! Lo adoro. Puoi vedere l'anteprima del font e scaricare tutti i file richiesti con un clic.
cuixiping

Strumento molto bello. Funziona molto bene e consente di scaricare latin-extanche caratteri.
piotrekkr,

3
Questa è l'opzione migliore. Fa tutto, puoi anche specificare il prefisso della cartella dei caratteri.
Maciej Krawczyk,

63

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


4
Questo è più che fantastico! (Spero che funzioni bene non ancora testato). Ho cercato qualcosa come questo modulo di volta in volta nel corso degli anni. Non scherzo, ho anche iniziato a scrivere la mia sceneggiatura che è tutt'altro che completa. È incredibile che così poche persone tendano a volerlo. Google sta nascondendo questi caratteri dietro stringhe generate e non fa open source i file webfont nel repository solo il ttf. Vogliono che usiamo i loro caratteri, vogliono che usiamo i loro server perché abusano di questo per tenere traccia delle persone. E anche le persone più attente alla privacy incorporano i caratteri dal server di Google.
redanimalwar,

1
La mia unica preoccupazione sono le licenze dei caratteri reali, non le ho studiate molto attentamente. Tutto quello che so è che le licenze dei caratteri differiscono da GPL o MIT. Quindi, siamo legalmente autorizzati a catturare questi caratteri dai server di Google e servirli da soli? Ancora una volta non credo per un minuto che Google stia dando tutti questi caratteri solo per il bene di rendere il mondo migliore, in realtà pagano gli sviluppatori per produrre caratteri aperti per loro in modo che abbiano sicuramente guadagnare qualcosa, dati molti dati. E se non è la tua privacy, puoi testare questi caratteri localmente senza Internet in questo modo.
redanimalwar,

2
Questa risposta dovrebbe essere più votata, perché questo script può scaricare tutti i formati e sottoinsiemi di caratteri in contrasto con localfont.com.
piotrekkr,

So che mi prenderai come una persona pigra, ma come un normale utente di Windows, fa schifo doverlo compilare ed ecc. Per poterlo usare ...
Lucas Bustamante

@LucasB Non è richiesta la compilazione. È uno script bash. So che Windows non viene fornito con Bash, ma sentiti libero di implementarlo nuovamente in un modo che supporti Windows. Non faceva parte del mio caso d'uso, quindi non ci ho passato del tempo.
Neverpanic,

14

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.


1
+1 per il collegamento a quell'articolo che spiega il codice CSS "universale" da usare e uno "ridotto" per i browser moderni!
ItalyPaleAle

2
Quindi dovrò servire in modo intelligente il browser con un formato diverso allora. So che questo è altamente scoraggiato, ma stiamo servendo la nostra pagina ad alcuni clienti cinesi ed è la ragione principale per cui vogliamo ospitarla. Hanno bloccato la maggior parte delle risorse di Google.
Lionel Chan,

6

È 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.


Oppure, a seconda del carattere tipografico, puoi semplicemente ottenere il kit Webfont direttamente dallo scoiattolo dei caratteri. fontsquirrel.com/fonts/open-sans
Jack Frost,

3

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


2

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" />

1

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.


1

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.




1

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'

1

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>";
        } 
    } 
}

0

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.


0

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).


0

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.