Importieren Google Fonts in CSS

1. Verwenden der Regel @import zum Importieren der Google Fonts in CSS
2. Verwenden des link-Tags zum Importieren der Google Fonts in CSS

In diesem Tutorial lernen wir einige Methoden zum Importieren von Google Fonts in CSS kennen.

Verwenden der Regel @import zum Importieren der Google Fonts in CSS

Die CSS-Regel @import wird verwendet, um ein weiteres Stylesheet in ein Stylesheet zu importieren. Das Stylesheet können wir in der Funktion url() und als String angeben.

Wir können auch die Regel @import verwenden, um externe Schriftarten in CSS zu importieren. Beispielsweise können wir die Google Fonts in der Funktion url() verwenden und die Schriftart mit der Eigenschaft font-family setzen.

Die Google Fonts bietet verschiedene Schriftarten, aus denen wir wählen können. Wir können die URL der Schriftart von der Website abrufen.

Gehen Sie zum Beispiel auf die Website von Google Fonts und wählen Sie die Schriftart Roboto. Klicken Sie dann in der Seitenleiste rechts auf den Radiobutton @import.

Kopieren Sie als nächstes die URL zwischen dem Tag style. In ähnlicher Weise erstellen Sie in HTML die Tags h1 und p.

Schreiben Sie in CSS die Regel @import oben im Stylesheet und fügen Sie die URL der Schriftart Roboto in die Funktion url() ein. Wählen Sie die Schriftart Outfit und erhalten Sie die URL.

Als nächstes wählen Sie das h1-Tag aus und setzen mit der Eigenschaft font-family die Schriftart Outfit. Stellen Sie im Absatz ebenfalls die Schriftart Roboto ein.

Auf diese Weise können wir Google Fonts in ein Stylesheet importieren.

Von der Verwendung der @import-Regel zum Importieren von Google-Fonts wird jedoch abgeraten. Dies liegt daran, dass die Schriftarten nicht auf der Webseite angezeigt werden, es sei denn, die Datei wird abgerufen.

Beispielcode:

<h1> Title </h1>
<p>This is Roboto font.</p>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');

h1 {
 font-family: 'Outfit', sans-serif;
}

p {
 font-family: 'Roboto', sans-serif;
}

Verwenden des link-Tags zum Importieren der Google Fonts in CSS

Der link-Tag ist die am besten geeignete Methode, um Google-Fonts in HTML zu importieren. Das Tag link wird empfohlen, da es die Schriftart vorlädt.

Wir können die Schriftart-URL im href-Attribut des link-Tags angeben. Wir können alle link-Tags von der Website Google Fonts generieren.

Gehen Sie zum Beispiel auf die Website von Google Fonts und wählen Sie die Schriftart Comforter Brush. Wählen Sie das Optionsfeld link und kopieren Sie die generierten link-Tags.

Fügen Sie dann die Tags in HTML ein und erstellen Sie ein p-Tag und schreiben Sie etwas Text hinein. Wählen Sie als nächstes das p-Tag in CSS aus und setzen Sie die font-family-Eigenschaft auf Comforter Brush.

Wir haben preconnect für das rel-Attribut in den ersten beiden link-Tags verwendet. Es teilt dem Browser mit, dass der Benutzer die Ressourcen im Attribut href benötigt, damit der Browser eine präventive Verbindung zu den Ressourcen initiieren kann.

Auf diese Weise können wir mit dem Tag link die Google-Fonts in CSS importieren.

Beispielcode:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}