Wie kann ich Google Web-Schriftarten auf meinem eigenen Server hosten?

Ich muss einige Google-Schriftarten in einer Intranet-Anwendung verwenden. Die Kunden können eine Internetverbindung haben oder nicht. Beim Lesen der Lizenzbedingungen scheint dies gesetzlich zulässig zu sein.

Bitte denken Sie daran, dass meine Antwort sehr gealtert ist.

Im Folgenden finden Sie weitere technisch anspruchsvollere Antworten, z.

• Neverpanic / Google-Font-Download
• google-webfont-helper
• localfont

Lassen Sie sich also nicht von der Tatsache, dass dies die derzeit akzeptierte Antwort ist, den Eindruck erwecken, dass dies immer noch die beste ist.

Sie können jetzt auch den gesamten Schriftsatz von Google über github in dessen Google / Font- Repository herunterladen . Sie bieten auch eine ~ 420 MB Zip-Momentaufnahme ihrer Schriftarten .

Sie laden Ihre Schriftartenauswahl zunächst als komprimiertes Paket herunter und erhalten eine Reihe von echten Schriftarten. Kopieren Sie sie an einen öffentlichen Ort, auf den Sie von Ihrem CSS aus verlinken können.

Auf der Download-Seite für Google Webfont finden Sie einen Include-Link wie folgt:

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

Es ist über eine Reihe von Definitionen mit einem CSS verknüpft, das die Schriftarten @font-facedefiniert.

Öffnen Sie es in einem Browser, um sie zu kopieren und in Ihr eigenes CSS einzufügen, und ändern Sie die URLs so, dass sie die richtigen Schriftdatei- und Formattypen enthalten.

Also das:

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

wird dies:

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

Wie Sie sehen können, besteht ein Nachteil beim Hosten der Schriftarten auf Ihrem eigenen System darin, dass Sie sich auf das wahre Schriftformat beschränken, während der Google Webfont-Dienst vom Zugriffsgerät bestimmt, welche Formate übertragen werden.

Außerdem musste ich .htaccessmeinem Verzeichnis eine Datei hinzufügen , die die Schriftarten enthält, die MIME-Typen enthalten, um zu verhindern, dass Fehler in Chrome Dev Tools auftauchen.

Für diese Lösung wird nur der wahre Typ benötigt, aber das Definieren von mehr schadet nicht, wenn Sie auch verschiedene Schriftarten einschließen möchten, wie z font-awesome.

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

Es gibt ein Tool localfont.com, mit dem Sie alle Schriftvarianten herunterladen können. Es generiert auch das entsprechende CSS für die Implementierung. veraltet

localfont ist ausgefallen. Stattdessen können Sie, wie Damir vorschlägt , den Google-Webfonts-Helper verwenden

Gute Lösung ist Google-Webfonts-Helfer .

Sie können mehr als eine Schriftvariante auswählen, was viel Zeit spart.

Ich habe ein Bash-Skript geschrieben , das die CSS-Datei auf den Servern von Google mit verschiedenen Benutzeragenten abruft, die verschiedenen Schriftformate in ein lokales Verzeichnis herunterlädt und eine CSS-Datei mit diesen schreibt. Beachten Sie, dass das Skript Bash Version 4.x benötigt.

Das Skript finden Sie unter https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ (ich reproduziere es hier nicht, daher muss ich es nur aktualisieren ein Ort, an dem ich muss).

Bearbeiten: Verschoben nach https://github.com/neverpanic/google-font-download

Der Inhalt der CSS-Datei (von der Include-URL) hängt davon ab, in welchem ​​Browser ich sie ansehe. Wenn Sie beispielsweise mit Chrome zu http://fonts.googleapis.com/css?family=Open+Sans navigieren, enthielt die Datei nur WOFF-Links. Mit dem Internet Explorer (unten) wurden sowohl EOT als auch WOFF eingeschlossen. Ich habe alle Links in meinen Browser eingefügt, um sie herunterzuladen.

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

Wenn Sie Ihre eigenen Web-Schriftarten hosten, müssen Sie eine korrekte Verknüpfung zu jedem Schrifttyp herstellen , ältere Browserfehler beheben usw. Wenn Sie Google Web Fonts (von Google gehostet) verwenden, verknüpft Google automatisch die richtigen Schriftarten für diesen Browser.

Es ist gesetzlich zulässig, solange Sie sich an die Bedingungen der Lizenz der Schriftart halten - normalerweise an die OFL.

Sie benötigen eine Reihe von Web-Schriftformaten, die vom Font Squirrel Webfont Generator erstellt werden können.

Das OFL verlangte jedoch, dass die Schriftarten umbenannt werden, wenn sie geändert werden. Wenn Sie den Generator verwenden, müssen Sie sie ändern.

Ich habe ein Skript in PHP geschrieben, das dem von @neverpanic ähnelt und automatisch sowohl das CSS als auch die Schriftarten ( sowohl angedeutet als auch nicht angedeutet ) von Google herunterlädt . Es liefert dann das richtige CSS und die richtigen Schriftarten von Ihrem eigenen Server basierend auf dem User Agent. Es behält seinen eigenen Cache bei, sodass Schriftarten und CSS eines Benutzeragenten nur einmal heruntergeladen werden.

Es ist in einem frühen Stadium, aber es kann hier gefunden werden: DaAwesomeP / php-offline-fonts

Da Sie alle Schriftarten (oder einige davon) auf Ihrem eigenen Server hosten möchten, laden Sie Schriftarten von diesem Repo herunter und verwenden Sie sie wie gewünscht: https://github.com/praisedpk/Local-Google-Fonts

Wenn Sie dies nur tun möchten, um das mit Google Fonts verbundene Problem beim Zwischenspeichern des Browsers zu beheben, können Sie alternative CDN-Schriftarten verwenden und folgende Schriftarten einschließen:

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

Oder eine bestimmte Schriftart wie:

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

Ich habe grunt-local-googlefont in einer Grunzaufgabe verwendet .

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

Um sie dann abzurufen:

grunt local-googlefont:opensans

Beachten Sie, dass ich eine Verzweigung aus dem Original verwende, die beim Abrufen von Schriftarten mit Leerzeichen im Namen besser funktioniert.

Sie können tatsächlich alle Schriftformatvarianten direkt von Google herunterladen und in Ihr CSS aufnehmen, um sie von Ihrem Server aus bereitzustellen. Auf diese Weise müssen Sie sich keine Sorgen machen, dass Google die Nutzer Ihrer Website verfolgt. Der Nachteil kann jedoch die eigene Serviergeschwindigkeit verlangsamen. Schriftarten sind sehr ressourcenintensiv. Ich habe in dieser Ausgabe noch keine Tests durchgeführt und frage mich, ob jemand ähnliche Gedanken hat.

Meine Lösung bestand darin, die TTF-Dateien von Google Web-Schriftarten herunterzuladen und dann onlinefontconverter.com zu verwenden .

Ich habe ein winziges PHP-Skript erstellt, um Download-Links von einer Google Fonts CSS-Import-URL zu erhalten, z. B.: Https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Sie können dieses Tool hier verwenden: http://nikoskip.me/gfonts.php

Wenn Sie beispielsweise die obige Import-URL verwenden, erhalten Sie Folgendes:

Wenn Sie Webpack verwenden, könnte Sie dieses Projekt interessieren: https://github.com/KyleAMathews/typefaces

Angenommen, Sie möchten die Roboto-Schriftart verwenden:

npm install typeface-roboto --save

Importieren Sie es dann einfach in den Einstiegspunkt Ihrer App (Haupt-JS-Datei):

import 'typeface-roboto'

Sie können dem Skript folgen, das mit PHP entwickelt wurde. Hier können Sie mithilfe des Skripts Google-Schriftarten herunterladen. Es werden die Schriftarten heruntergeladen und eine CSS-Datei erstellt und in zip archiviert.
Sie können den Quellcode vom GitHub https://github.com/sourav101/google-fonts-downloader herunterladen

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

Zusätzlich zu k0pernicus möchte ich Best- Served -Local vorschlagen . Es ist auch ein Bash (v4) -Skript, mit dem Webserver-Betreiber Google-Web-Schriftarten von ihrem eigenen Webserver herunterladen und bereitstellen können. Zusätzlich zu dem anderen Bash-Skript kann der Benutzer die Bereitstellung aktueller Schriftdateien und CSS-Dateien (über Cron und dergleichen) vollständig automatisieren.

Es gibt ein sehr einfaches Skript, das in einfachem Java geschrieben ist, um alle Schriftarten von einem Google Web Font-Link herunterzuladen (mehrere Schriftarten werden unterstützt). Außerdem wird die CSS-Datei heruntergeladen und an lokale Dateien angepasst. Der Benutzeragent kann angepasst werden, um auch andere Dateien als nur WOFF2 abzurufen. Siehe https://github.com/ssc-hrep3/google-font-download

Die resultierenden Dateien können einfach zu einem Erstellungsprozess hinzugefügt werden (z. B. einem Webpack-Build vue-webpack).

Sie können Quellschriftarten von https://github.com/google/fonts herunterladen

Verwenden Sie danach das font-rangerTool, um Ihre große Unicode-Schriftart in mehrere Teilmengen (z. B. Latein, Kyrillisch) aufzuteilen. Mit dem Tool sollten Sie Folgendes tun:

• Generieren Sie Teilmengen für jede von Ihnen unterstützte Sprache
• Verwenden Sie eine Teilmenge im Unicode-Bereich, um Bandbreite zu sparen
• Entfernen Sie Bloat von Ihren Schriftarten und optimieren Sie sie für das Web
• Konvertieren Sie Ihre Schriftarten in ein komprimiertes woff2-Format
• Stellen Sie .woff-Fallback für ältere Browser bereit
• Passen Sie das Laden und Rendern von Schriftarten an
• Generieren Sie eine CSS-Datei mit @ font-face-Regeln
• Hosten Sie Web-Schriftarten selbst oder verwenden Sie sie lokal

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

PS Sie können dies auch mithilfe der Node.js-API automatisieren