Wie importiere ich Google Web Font in eine CSS-Datei?

258

Ich arbeite mit einem CMS, auf das ich nur Zugriff habe. Daher kann ich nichts in den KOPF des Dokuments aufnehmen. Ich habe mich gefragt, ob es eine Möglichkeit gibt, die Webschriftart aus der CSS-Datei zu importieren.

David
quelle

Antworten:

382

Verwenden Sie die @importMethode:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Offensichtlich ist "Open Sans" ( Open+Sans) die importierte Schriftart. Ersetzen Sie es also durch Ihr. Wenn der Name der Schriftart mehrere Wörter enthält, codieren Sie ihn per URL, indem Sie +wie ich zwischen jedem Wort ein Zeichen einfügen.

Stellen Sie sicher, dass Sie das @importvor allen Regeln ganz oben in Ihrem CSS platzieren.

Google Fonts kann die @importDirektive automatisch für Sie generieren . Wenn Sie eine Schriftart ausgewählt haben, klicken Sie auf das (+)Symbol daneben. In der unteren linken Ecke wird ein Container mit dem Titel "1 Familie ausgewählt" angezeigt. Klicken Sie darauf und es wird erweitert. Verwenden Sie die Registerkarte "Anpassen", um Optionen auszuwählen. Wechseln Sie dann zurück zu "Einbetten" und klicken Sie unter "Schriftart einbetten" auf "@import". Kopieren Sie das CSS zwischen den <style>Tags in Ihr Stylesheet.

ModernDesigner
quelle
25
Sie sollten die Verwendung von @import vermeiden, da dadurch das Laden der enthaltenen Ressource verzögert wird, bis die Datei abgerufen wird. Die detaillierte Antwort finden Sie hier: stackoverflow.com/a/12380004/925560
Renato Carvalho
5
Das Verschieben der @ import-Zeile nach oben hat mein Leben gelöst! Danke dir!
Joalcego
2
Warum sagt Google das? Google Insides behauptet, @import nicht zu tun. developer.google.com/speed/pagespeed/insights ?
Gefahr89
2
Dies ist eine veraltete Antwort. @importwird nacheinander geladen und am besten vermieden: varvy.com/pagespeed/avoid-css-import.html Die bevorzugte (und standardmäßige) Methode zum Laden von Google-Schriftarten ist heutzutage die Verwendung <link>.
Chuck Le Butt
2
Sie werden es bereuen, wenn Sie zu SEO kommen und beginnen, Ihre Seitengeschwindigkeit mit Google PageSpeed ​​Insights zu optimieren. Verwenden <link>und optimieren Sie stattdessen die Lieferung.
Buchhalter
66
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Verwenden Sie lieber nicht @import. Verwenden Sie einfach das oben gezeigte Link-Element im Kopf Ihres Layouts.

Burk
quelle
19
Können Sie erläutern, warum "Besser nicht verwenden"? Ich habe nach dieser Frage gesucht, weil ich wissen möchte, welche Methode als die beste angesehen wird.
Adam Hollow
2
Ich hatte ein Problem mit dem Internet Explorer mit @import. Manchmal liest es es einfach nicht.
Burk
6
Er sagte ausdrücklich, dass er das <link> -Tag in seinem Header nicht verwenden kann.
Nathan
26
+1 für die Verwendung von 'Link', da das parallele Laden anderer externer Dateien nicht blockiert wird. 'import' blockiert das parallele Laden anderer externer Dateien.
Jahmic
2
Mit @import können Sie die Schriftart als Teil des CSS-Stils anstelle des HTML-Markups festlegen, das sich semantisch korrekter anfühlt, und Sie können die Schriftarten auf Ihrer Site über CSS austauschen. Aber wie Chuck kommentierte, scheint es, als würdest du einen leichten Geschwindigkeitstreffer dafür hinnehmen. Vielleicht die Ladezeiten messen und dann von Fall zu Fall entscheiden. Beachten Sie, dass für SVGs @import der einzige Weg ist, der AFAIK funktioniert .
Mentalist
38

Laden Sie die Schriftart ttf / andere Formatdateien herunter und fügen Sie dann einfach dieses CSS-Codebeispiel hinzu:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

Fidel
quelle
37

Fügen Sie den folgenden Code in Ihre CSS-Datei ein, um Google Web Fonts zu importieren.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Ersetzen Sie den Parameterwert Open + Sans durch Ihren Schriftnamen.

Ihre CSS-Datei sollte folgendermaßen aussehen:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}
Shubham Kumar
quelle
13
  1. Gehen Sie einfach zu https://fonts.google.com/
  2. Fügen Sie die Schriftart hinzu, indem Sie auf + klicken
  3. Gehen Sie zu ausgewählter Schriftart> Einbetten> @IMPORT> URL kopieren und fügen Sie sie in Ihre CSS-Datei über dem Body-Tag ein.
  4. Es ist fertig.
Karunesh
quelle
9

Verwenden Sie das Tag @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');
jmz7v
quelle
8

Berücksichtigen Sie neben den obigen Antworten auch diese Website. https://google-webfonts-helper.herokuapp.com/fonts

Vorteil:

  • Mit dieser Option können Sie diese Google-Schriftarten selbst hosten, um bessere Antwortzeiten zu erzielen

  • Wählen Sie Ihre Schriftart (en)

  • Wähle deinen Zeichensatz
  • Wählen Sie Ihre Schriftstile / Gewichtung
  • Wählen Sie Ihren Zielbrowser
  • und Sie erhalten die CSS-Snippets (zu Ihrem CSS-Stylesheet hinzufügen) sowie eine Zip-Datei der Schriftdateien, die in Ihr Projekt aufgenommen werden sollen

ZB your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}
MarcoZen
quelle
1
Auf diese Weise können Sie auch font-weight: 400zuerst und dann den Rest der Schriftart laden, indem Sie denselben Code ohne Argumente verwenden. Dies ermöglicht eine schnellere Anzeige und, wenn Sie nicht die gesamte Schriftart benötigen, kleinere CSS-Dateien.
Moto
4

Sie können auch @ font-face verwenden, um auf die URLs zu verlinken. http://www.css3.info/preview/web-fonts-with-font-face/

Unterstützt das CMS Iframes? Möglicherweise können Sie auch einen Iframe in den oberen Bereich Ihres Inhalts einfügen. Dies wäre wahrscheinlich langsamer - besser, um es in Ihr CSS aufzunehmen.

Eric Keyte
quelle
3
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Um die Schriftart auszuwählen, besuchen Sie den Link: https://fonts.google.com

Schreiben Sie den Schriftnamen Ihrer Wahl von der Website ohne die Klammern.

Zum Beispiel haben Sie dann Lobster als Schriftart Ihrer Wahl gewählt.

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Dann können Sie dies normalerweise als Schriftfamilie in Ihrer gesamten HTML / CSS-Datei verwenden.

Beispielsweise

<h2 style="Lobster">Please Like This Answer</h2>
RohanVTK
quelle