Heim >Web-Frontend >CSS-Tutorial >Wie importiere ich Google Web Fonts in Ihre CSS-Datei?

Wie importiere ich Google Web Fonts in Ihre CSS-Datei?

DDD
DDDOriginal
2024-12-16 04:49:19992Durchsuche

How to Import Google Web Fonts into Your CSS File?

Google Web Fonts in CSS-Dateien importieren

Bei der Arbeit mit Content-Management-Systemen (CMS), bei denen der Zugriff auf den Dokumentkopf eingeschränkt ist, wird der Import durchgeführt Google Web Fonts direkt in die CSS-Datei einfügen ist notwendig. So erreichen Sie dies:

Verwenden der @import-Methode

Mit der @import-Methode können Sie externe CSS-Dateien in Ihre CSS-Datei importieren. Um eine Google Web-Schriftart zu importieren, verwenden Sie die folgende Syntax:

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

Ersetzen Sie „Open Sans“ durch den Namen Ihrer gewünschten Schriftart. Wenn der Schriftname mehrere Wörter enthält, kodieren Sie sie per URL, indem Sie zwischen jedem Wort ein „ “-Zeichen hinzufügen.

Platzieren der @import-Direktive

Stellen Sie sicher, dass die @import Die Direktive wird ganz oben in Ihrer CSS-Datei vor allen Stilregeln platziert.

Verwendung von Google Fonts API

Google Fonts bietet eine einfache Möglichkeit, die @import-Direktive für Ihre Schriftart zu generieren. Wählen Sie die gewünschte Schriftart aus, klicken Sie auf das Symbol ( ) und erweitern Sie den Container „1 Familie ausgewählt“.

Wählen Sie auf der Registerkarte „Anpassen“ die gewünschten Optionen aus. Klicken Sie auf der Registerkarte „Einbetten“ unter „Schriftart einbetten“ auf „@import“. Kopieren Sie das CSS zwischen