it-swarm.com.de

Wie hosten Sie Google Webfonts auf meinem eigenen Server?

Ich muss einige Google-Schriftarten in einer Intranetanwendung verwenden. Die Clients verfügen möglicherweise über eine Internetverbindung. Beim Lesen der Lizenzbedingungen scheint es gesetzlich zulässig zu sein.

253

Bitte bedenken Sie, dass meine Antwort viel gealtert ist.

Es gibt andere technisch ausgefeiltere Antworten, z.

lassen Sie sich nicht davon überzeugen, dass dies die derzeit akzeptierte Antwort ist, und vermittelt Ihnen den Eindruck, dass dies immer noch die beste ist.


Sie können jetzt auch den gesamten Zeichensatz von Google über github in seinem google/font - Repository herunterladen. Sie bieten auch eine ~ 360MB Zip-Momentaufnahme ihrer Schriften .


Sie laden Ihre Schriftauswahl zunächst als komprimiertes Paket herunter und stellen Ihnen eine Reihe von True Type-Schriftarten zur Verfügung. Kopieren Sie sie an einem öffentlichen Ort, an den Sie von Ihrer CSS-Website aus einen Link erstellen können.

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

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

Es ist mit einem CSS verbunden, das die Schriften über eine Reihe von @font-face-Definitionen definiert.

Öffnen Sie es in einem Browser, um sie zu kopieren und in Ihr eigenes CSS einzufügen, und ändern Sie die URLs, um die richtigen Schriftartdateien und Formattypen einzubeziehen.

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, ist das Hosten der Schriftarten auf Ihrem eigenen System auf diese Weise der Nachteil, dass Sie sich auf das True-Type-Format beschränken, während der Google-Webfont-Dienst durch das zugreifende Gerät bestimmt, welche Formate übertragen werden.

Außerdem musste ich meinem Verzeichnis eine .htaccess-Datei hinzufügen, die die Schriftarten mit MIME-Typen enthielt, um Fehler in Chrome Dev Tools zu vermeiden.

Für diese Lösung ist nur der True-Typ erforderlich. Wenn Sie jedoch weitere Schriftarten einbeziehen möchten, z. B. font-awesome, schadet es nicht, mehr zu definieren.

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

Es gibt ein Werkzeug 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 schlägt , google-webfonts-helper


196
udondan

Eine gute Lösung ist google-webfonts-helper .

Sie können mehrere Schriftvarianten auswählen, was viel Zeit spart.

119
Damir Bulic

Ich habe ein bash script geschrieben, das die CSS-Datei mit verschiedenen Benutzeragenten auf den Servern von Google 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.

Siehe https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ für das Skript (Ich reproduziere es hier nicht, also habe ich es nur um es an einem Ort zu aktualisieren, wenn ich muss).

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

58
neverpanic

Der Inhalt der CSS-Datei (von der Include-URL) hängt davon ab, von welchem ​​Browser ich sie ansehe. Wenn Sie beispielsweise nach http://fonts.googleapis.com/css?family=Open+Sans mit Chrome suchen, enthielt die Datei nur WOFF-Links. Mit Internet Explorer (unten) wurden sowohl EOT als auch WOFF verwendet. 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 Webfonts hosten, müssen Sie korrekt mit jedem Schrifttyp verknüpfen , ältere Browserfehler beheben usw. Wenn Sie Google Webfonts (von Google gehostet) verwenden, führt Google automatisch einen Link zu den korrekten Schriftarten für diesen Browser.

12

Dies ist gesetzlich zulässig, solange Sie sich an die Lizenzbestimmungen der Schriftart halten - in der Regel die OFL. 

Sie benötigen eine Reihe von Web-Schriftformaten und der Font Squirrel Webfont Generator kann diese erzeugen. 

Die OFL erforderte jedoch, dass die Zeichensätze umbenannt werden, wenn sie geändert werden. Die Verwendung des Generators bedeutet, sie zu ändern. 

5
davelab6

Ich habe ein Skript in PHP geschrieben, das dem von @neverpanic ähnelt und das sowohl CSS als auch Schriftarten (beides andeutet) von Google automatisch lädt. Es stellt dann das richtige CSS und die richtigen Schriftarten von Ihrem eigenen Server aus, basierend auf dem Benutzeragenten. Es behält seinen eigenen Cache, so dass 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

2
DaAwesomeP

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

1
Adam Youngers

Sie können tatsächlich alle Schriftformatvarianten direkt von Google herunterladen und in Ihre css aufnehmen, um sie von Ihrem Server aus zu liefern. Auf diese Weise müssen Sie sich nicht darum kümmern, ob Google die Nutzer Ihrer Website verfolgt. Der Nachteil kann jedoch die eigene Servogeschwindigkeit verringern. Schriften sind sehr anspruchsvoll. Ich habe in dieser Ausgabe noch keine Tests durchgeführt und frage mich, ob jemand ähnliche Gedanken hat.

1
Flyhead

Wenn Sie alle Zeichensätze (oder einige davon) auf Ihrem eigenen Server hosten möchten, laden Sie Zeichensätze von diesem Repo herunter und verwenden Sie sie nach Belieben: https://github.com/praisedpk/Local-Google-Fonts

1
Hamid Sarfraz

Wenn Sie Webpack verwenden, könnten Sie an diesem Projekt interessiert sein: https://github.com/KyleAMathews/typefaces

Z.B. Sagen Sie, Sie möchten die Roboto-Schriftart verwenden:

npm install typeface-roboto --save

Dann importieren Sie es einfach in den Eingangspunkt Ihrer App (JS-Hauptdatei):

import 'typeface-roboto'
1
justin

Ich habe ein winziges PHP) -Skript erstellt, um Download-Links von einer Google Fonts-CSS-Import-URL abzurufen, 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 oben angegebene Import-URL verwenden, erhalten Sie Folgendes:

enter image description here

1
nikoskip

Ich habe grunt-local-googlefont in einer Grunt-Aufgabe 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');
 };

Dann, um sie abzurufen:

grunt local-googlefont:opensans

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

1
Hank

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

Verwenden Sie anschließend das font-ranger-Tool, um Ihre große Unicode-Schriftart in mehrere Teilmengen (z. B. lateinisch, kyrillisch) aufzuteilen. Sie sollten mit dem Tool Folgendes tun:

  • Generieren Sie Subsets für jede unterstützte Sprache
  • Verwenden Sie Unicode-Bereich-Subsetting, um Bandbreite zu sparen
  • Entfernen Sie Aufblähen 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
  • Laden und Rendern von Schriftarten anpassen
  • Generieren Sie eine CSS-Datei mit @ font-face-Regeln
  • Self-Host-Webfonts oder verwenden Sie diese lokal

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

P.S. Sie können dies auch mit der Node.js-API automatisieren

0
Do Async

Es gibt ein sehr einfaches Skript, das in reinem 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 leicht zu einem Build-Prozess hinzugefügt werden (z. B. ein Webpack-Build wie vue-webpack ).

0
ssc-hrep3

Neben k0pernicus möchte ich best-served-local vorschlagen. Es ist auch ein bash (v4) -Skript, mit dem Webserver-Betreiber Google-Webfonts von ihrem eigenen Webserver herunterladen und bereitstellen können. Zusätzlich zu den anderen bash-Skripts kann der Benutzer die Bereitstellung aktueller Zeichensatzdateien und css-Dateien vollständig automatisieren (über cron und so).

0