Herunterladen einer Google-Schriftart und Einrichten einer Offline-Site, die diese verwendet

Ich habe eine Vorlage und sie verweist auf eine Google-Schriftart wie diese:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Wie kann ich es herunterladen und für die Verwendung auf meinen Seiten einrichten, die ständig offline ausgeführt werden?

Gehen Sie einfach zu Google Fonts - http://www.google.com/fonts/ , fügen Sie die gewünschte Schriftart zu Ihrer Sammlung hinzu und klicken Sie auf den Download-Button. Verwenden Sie dann einfach das @ fontface, um diese Schriftart mit Ihrer Webseite zu verbinden. Übrigens, wenn Sie den von Ihnen verwendeten Link öffnen, sehen Sie ein Beispiel für die Verwendung von @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Zum Beispiel

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Ändern Sie einfach die URL-Adresse in den lokalen Link in der heruntergeladenen Schriftartdatei.

Sie können es noch einfacher machen.

Laden Sie einfach die Datei herunter, die Sie verlinkt haben:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Nennen Sie es opensans.css oder so.

Ändern Sie dann einfach die Links in url () in Ihren Pfad zu Schriftdateien.

Und ersetzen Sie dann Ihre Beispielzeichenfolge durch:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Schauen Sie sich den Google Webfonts-Helfer an

Sie können jede Web-Schriftart von Google herunterladen und CSS-Code für die Implementierung vorschlagen. Mit diesem Tool können Sie auch problemlos alle Formate gleichzeitig herunterladen.

Wollten Sie schon immer wissen, wo Google seine Webfonts hostet? Dieser Dienst kann nützlich sein, wenn Sie alle .eot-, .woff-, .woff2-, .svg- und .ttf-Dateien einer Schriftvariante direkt von Google herunterladen möchten (normalerweise würde Ihr User-Agent das beste Format bestimmen).

Schauen Sie sich auch die Github-Seite an .

Es wurde ein schrittweiser Weg gefunden, um dies zu erreichen (für 1 Schriftart):
( Stand: 9. September 2013 )

1. Wählen Sie Ihre Schriftart unter http://www.google.com/fonts
2. Fügen Sie die gewünschte Datei mit der blauen Schaltfläche "Zur Sammlung hinzufügen" zu Ihrer Sammlung hinzu
3. Klicken Sie auf die Schaltfläche "Alle Stile anzeigen" neben "Aus Sammlung entfernen" und stellen Sie sicher, dass Sie andere Stile ausgewählt haben, die Sie möglicherweise ebenfalls benötigen, z. B. "Fett" ...
4. Klicken Sie unten rechts auf der Seite auf die Registerkarte "Verwenden"
5. Klicken Sie oben auf die Download-Schaltfläche mit einem Abwärtspfeil
6. Klicken Sie in der angezeigten Popup-Nachricht auf "Zip-Datei"
7. Klicken Sie im Popup auf die Schaltfläche "Schließen"
8. Scrollen Sie langsam durch die Seite, bis Sie die 3 Registerkarten "Standrd | @import | Javascript" sehen.
9. Klicken Sie auf die Registerkarte "@import"
10. Wählen Sie die URL zwischen 'url('und aus und kopieren Sie sie')'
11. Kopieren Sie es in die Adressleiste in einem neuen Tab und gehen Sie dorthin
12. Führen Sie "Datei> Seite speichern unter ..." aus und nennen Sie sie "gewünschter Schriftname.css" (entsprechend ersetzen)
13. Dekomprimieren Sie die heruntergeladene ZIP-Datei für Schriftarten (.ttf sollte extrahiert werden).
14. Gehen Sie zu " http://ttf2woff.com/ " und konvertieren Sie alle aus zip extrahierten .ttf in .woff
15. Bearbeiten desiredfontname.cssund ersetzen Sie alle darin enthaltenen URLs [zwischen 'url('und ')'] durch die entsprechende konvertierte .woff-Datei, die Sie auf ttf2woff.com erhalten haben. Der Pfad, den Sie schreiben, sollte Ihrem Server doc_root entsprechen
16. Speichern Sie die Datei, verschieben Sie sie an ihren endgültigen Platz und schreiben Sie das entsprechende <link/>CSS-Tag, um diese in Ihre HTML-Seite zu importieren
17. Beziehen Sie sich von nun an auf diese Schriftart anhand ihres font-familyNamens in Ihren Stilen

Das ist es. Weil ich das gleiche Problem hatte und die Lösung oben bei mir nicht funktionierte.

Die anderen Antworten sind nicht falsch, aber ich fand, dass dies der schnellste Weg ist.

1. Laden Sie die Zip-Datei von Google-Schriftarten herunter und entpacken Sie sie.
2. Laden Sie jeweils 3 Schriftartdateien auf http://www.fontsquirrel.com/tools/webfont-generator hoch
3. Laden Sie die Ergebnisse herunter.

Die Ergebnisse enthalten alle Schriftformate: woff, svg, ttf, eot .

UND als zusätzlichen Bonus generieren sie die CSS-Datei auch für Sie!

3 Schritte:

1. Laden Sie Ihre benutzerdefinierte Schriftart auf Goole Fonts herunter und laden Sie die CSS-Datei herunter, z. B.: Laden Sie http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 herunter und speichern Sie sie als example.css
2. Öffnen Sie die heruntergeladene Datei ( example.css ). Jetzt müssen Sie alle Font-Face-Dateien herunterladen und im Fonts- Verzeichnis speichern .
3. Bearbeiten example.css : Ersetzen Sie alle font-face - Datei auf Ihrem css herunterladen

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Schauen Sie sich src an: -> url. Laden Sie http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 herunter und speichern Sie es im Schriftartenverzeichnis . Danach ändern Sie die URL zu Ihrer gesamten heruntergeladenen Datei. Jetzt wird es so aussehen

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Laden Sie alle Schriftarten herunter, die eine CSS-Datei enthalten. Ich hoffe, es wird Ihnen helfen

Wenn Sie Ihre Paketabhängigkeiten explizit deklarieren oder den Download automatisieren möchten, können Sie ein Knotenpaket hinzufügen, um Google-Schriftarten abzurufen und lokal bereitzustellen.

npm - Google Schriftart herunterladen s

Das Schriftartenprojekt erstellt NPM-Pakete für Open Source-Schriften:

Jedes Paket wird mit allen erforderlichen Fons und CSS geliefert, um eine Open Source-Schrift selbst zu hosten.
Alle Google-Schriftarten wurden hinzugefügt sowie eine kleine, aber wachsende Liste anderer Open-Source-Schriftarten.

Suchen Sie einfach in npm nach, um die verfügbaren Schriftarten wie Schrift-Roboto oder Schrift-Open-Sans zu durchsuchen und wie folgt zu installieren:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

npm - Google Fonts Download- ers

Für den allgemeineren Anwendungsfall gibt es mehrere npm-Pakete, die Schriftarten in zwei Schritten bereitstellen, indem Sie zuerst das Paket abrufen und dann auf den Namen und die Optionen der Schriftarten verweisen, die Sie einschließen möchten.

Hier sind einige der Optionen:

• Google Fonts Webpack Plugin
• Google Fonts Offline
• Google Fonts
• Holen Sie sich Google Fonts

Weiterführende Literatur :

• Wie kann ich Materialsymbole offline hosten?
• Verwenden von Offline-Materialsymbolen und Roboto-Schriftarten in der Electron-App

Im Wesentlichen fügen Sie die Schriftart in Ihr Projekt ein.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Bei Verwendung von Google Fonts ist Ihr Workflow in drei Schritte unterteilt: "Auswählen", "Anpassen", "Einbetten". Wenn Sie genau hinschauen, befindet sich am rechten Ende der Seite "Verwenden" ein kleiner Pfeil, mit dem Sie die aktuell in Ihrer Sammlung enthaltene Schriftart herunterladen können.

Danach und sobald die Schriftart auf Ihrem System installiert ist, müssen Sie sie nur noch wie jede andere reguläre Schriftart verwenden, die die font-familyCSS-Direktive verwendet.

Ich folgte der Antwort von duydb , um den folgenden Python-Code zu erstellen, der diesen Prozess automatisiert.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Hoffe, dies hilft bei einigen Todesfällen durch Kopieren und Einfügen.

Sie müssen die Schriftart herunterladen und lokal referenzieren.

Laden Sie das CSSvon dem von Ihnen geposteten Link herunter, laden Sie dann alle WOFFDateien herunter und konvertieren Sie sie (falls erforderlich) in TTF.

Ändern Sie dann den CSSvon Ihnen geposteten Link, um die Schriftarten lokal einzuschließen.

Von

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

Zu

url(/path/to/font/font.woff)

Voila! Möglicherweise müssen Sie noch etwas tun, aber das Obige sind die Grundlagen. Dieser Artikel erklärt etwas besser.

Laden Sie einfach die Schriftart herunter und extrahieren Sie sie in einen Ordner. Verknüpfen Sie dann diese Schriftart. Der folgende Code hat bei mir richtig funktioniert.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}