Heim >Web-Frontend >CSS-Tutorial >Wie kann ich Google Web Fonts in meine CSS-Datei importieren?

Wie kann ich Google Web Fonts in meine CSS-Datei importieren?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-05 21:51:19247Durchsuche

How Can I Import Google Web Fonts into My CSS File?

Google Web Fonts in CSS-Dateien importieren: Eine Anleitung

Der Import von Google Web Fonts in CSS-Dateien kann die Ästhetik Ihrer Website verbessern. Das Fehlen eines direkten Zugangs zum Abschnitt kann in bestimmten CMS-Umgebungen einschränkend erscheinen. Dennoch gibt es eine Lösung, um diese Schriftarten nahtlos in Ihre CSS-Datei zu integrieren.

Verwendung der @import-Methode

Die @import-Direktive erweist sich als effektive Methode zum Importieren von Google Web Fonts. Um beispielsweise die Schriftart „Open Sans“ in Ihre CSS-Datei aufzunehmen, verwenden Sie die folgende Syntax:

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

Denken Sie daran, „Open Sans“ durch den Namen Ihrer gewünschten Schriftart zu ersetzen. Wenn der Schriftname aus mehreren Wörtern besteht, kodieren Sie jedes Wort mit einem Pluszeichen ( ), wie im Beispiel oben gezeigt.

Korrekte Platzierung und Generierung

Positionieren Sie die @import-Direktive am Anfang Ihrer CSS-Datei, bevor Sie Regeln implementieren. Google Fonts bietet eine automatisierte Methode zum Erstellen der @import-Direktive. Wählen Sie einfach eine Schriftart aus, klicken Sie auf das Symbol ( ) und erweitern Sie den Container „1 Familie ausgewählt“.

Gehen Sie zur Registerkarte „Anpassen“, um Ihre Optionen zu verfeinern, und wechseln Sie dann zur Registerkarte „Einbetten“. Wählen Sie unter „Schriftart einbetten“ die Option „@import“ aus. Kopieren Sie das im