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

138

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?

user2147954
quelle

Antworten:

101

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'>
Dmitriy Butenko
quelle
8
Ich habe es immer noch nicht bekommen
user2147954
22
Im Gegensatz zu Google-Schriftarten beim Server von Google basiert dieser Ansatz ausschließlich auf dem WOFF-Format und ist daher wesentlich eingeschränkter. Außerdem verteilt Google ihre Schriftarten im TTF-Format, nicht im WOFF.
Jukka K. Korpela
24
Seien Sie vorsichtig, fonts.googleapis generiert unterschiedliche @ font-face-Deklarationen für verschiedene Browser.
Hüseyin Yağlı
7
Dies ist NICHT korrekt, da Google eine browserspezifische CSS-Datei von fonts.googleapis.com/… sendet. Wenn Sie diese Datei also mit Chrome öffnen, erhalten Sie ein anderes @ font-Gesicht als beim Öffnen mit dem IE oder einem anderen Browser. WOFF2-Schriftarten werden beispielsweise nur an Firefox und Chrome gesendet, da andere Browser sie (noch) nicht unterstützen. caniuse.com/#feat=woff2
Joost van der Laan
4
Ignorieren Sie diese Antwort unabhängig vom akzeptierten Status. Es ist falsch, wie Joost van der Laan hier ausgeführt hat. Siehe die Highscore-Antwort von @ marco-kerwitz unten, die als die richtige Antwort markiert werden sollte.
Appurist - Paul W
325

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 .

Marco Kerwitz
quelle
20
Ich frage mich nur, warum Google das überhaupt nicht getan hat. +1
tftd
3
Dies funktioniert hervorragend. Content-type: text/css; charset: UTF-8
Stellen
Wenn Sie ein Webpack oder ein anderes Tool verwenden, das CSS / SASS-Importe packt, ist dieser Ansatz der beste. Diese Frage beschreibt den Prozess etwas detaillierter.
Tempo
Vielen Dank für den Hinweis. Rettete meinen Tag!
Evnica
1
Einzeiler , im Zielverzeichnis aus:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip
smnbbrv
43

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.

1111161171159459134
quelle
1
Diese Schritte haben perfekt funktioniert. Ich möchte das nur für diejenigen hinzufügen, die noch keine woff-Dateierweiterungen verwenden, um sicherzugehen, und diesen Mimetyp in der web.config hinzufügen.
Coding101
1
Kein Konverter erforderlich. Schauen Sie sich die Antwort von Marco Kerwitz an.
Herr_Schwabullek
25

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!

sym3tri
quelle
+1 für eine Antwort, an die ich beim Lesen nicht denken musste. Es wäre fantastisch, einen direkten Google Font Converter zu finden, ohne ihn vorher hochladen zu müssen. Beispieldienstprogramm: Bei der Offline-Website-Verwaltung.
Meetai.com
Dies ist sehr praktisch, um die verschiedenen Schriftformate für Sie generieren zu lassen. Jeder, der es verwendet, muss sich jedoch darüber im Klaren sein, dass das generierte CSS nicht sehr intelligent ist. Es generiert zwei (oder mehr) Stile derselben Schriftart als separate Schriftfamilien anstelle einer Schriftfamilie mit unterschiedlichen Schriftstärken. Aber es ist ziemlich einfach, es selbst in der CSS zu reparieren.
Ken Sung
2
Kein Konverter erforderlich. Schauen Sie sich die Antwort von Marco Kerwitz an
Herr_Schwabullek
Ich konnte 10 Schriftarten auf einmal hochladen, so dass anscheinend die Beschränkung auf 3 Schriftarten entfernt oder erhöht wurde
Adrian Hedley
4

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

duydb
quelle
4

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:

Weiterführende Literatur :

KyleMit
quelle
3

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');
Davidb
quelle
toter Link zum Artikel
TecHunter
Der Download enthält keine .eot-Datei
exe
2

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.

Pierre-Adrien Buisson
quelle
0

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.

Wytamma Wirth
quelle
-1

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.

Mattios550
quelle
DID das gleiche, aber andere Seiten werden verzerrt. : <link href = "./ css / font.woff" rel = 'stylesheet' type = 'text / css'>
user2147954
Wird Ihre Schriftartdatei aufgerufen font.woff? Haben Sie überprüft, ob die Datei geladen ist?
Terry
@ Terry Ich bin mir nicht sicher, was du meinst - das war ein fiktiver Name für die Datei.
Mattios550
-3

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); 
}
Ashish Waman
quelle