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.
Schauen Sie sich auch die Github-Seite an .
quelle
Content-type: text/css; charset: UTF-8
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
Es wurde ein schrittweiser Weg gefunden, um dies zu erreichen (für 1 Schriftart):
( Stand: 9. September 2013 )
Das ist es. Weil ich das gleiche Problem hatte und die Lösung oben bei mir nicht funktionierte.
quelle
Die anderen Antworten sind nicht falsch, aber ich fand, dass dies der schnellste Weg ist.
Die Ergebnisse enthalten alle Schriftformate: woff, svg, ttf, eot .
UND als zusätzlichen Bonus generieren sie die CSS-Datei auch für Sie!
quelle
3 Schritte:
Ex:
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
** Laden Sie alle Schriftarten herunter, die eine CSS-Datei enthalten. Ich hoffe, es wird Ihnen helfen
quelle
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:
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 - 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 :
quelle
Im Wesentlichen fügen Sie die Schriftart in Ihr Projekt ein.
quelle
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-family
CSS-Direktive verwendet.quelle
Ich folgte der Antwort von duydb , um den folgenden Python-Code zu erstellen, der diesen Prozess automatisiert.
Hoffe, dies hilft bei einigen Todesfällen durch Kopieren und Einfügen.
quelle
Sie müssen die Schriftart herunterladen und lokal referenzieren.
Laden Sie das
CSS
von dem von Ihnen geposteten Link herunter, laden Sie dann alleWOFF
Dateien herunter und konvertieren Sie sie (falls erforderlich) inTTF
.Ändern Sie dann den
CSS
von Ihnen geposteten Link, um die Schriftarten lokal einzuschließen.Von
Zu
Voila! Möglicherweise müssen Sie noch etwas tun, aber das Obige sind die Grundlagen. Dieser Artikel erklärt etwas besser.
quelle
font.woff
? Haben Sie überprüft, ob die Datei geladen ist?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.
quelle