Zum Hauptinhalt springen

Google Fonts verwenden

  1. Gehen Sie zu Google Fonts und wählen Sie eine Schriftart aus, die Ihnen gefällt.

  2. Suchen Sie auf der Schriftart-Seite die Schaltfläche Get font und klicken Sie darauf.

1

  1. Klicken Sie auf Get embed code.

2

  1. Wählen Sie @import.

3

  1. Hier müssen wir zwei Teile des Inhalts kopieren:

4

Erster Teil

Zum Beispiel sieht bei der von mir gewählten Schriftart der von Google bereitgestellte Einbettungscode so aus:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

Wir müssen nur den Teil nach dem Fragezeichen in der URL kopieren (der im Bild rot markierte Teil) und ihn in das Feld Google Fonts (Font families) auf der Einstellungsseite des Plugins einfügen. In diesem Beispiel muss ich nur family=Noto+Sans+JP:[email protected]&display=swap kopieren.

Zweiter Teil

Für diese Schriftart stellt Google folgenden Stilcode bereit:

// <uniquifier>: Verwenden Sie einen eindeutigen und aussagekräftigen Klassennamen
// <weight>: Verwenden Sie einen Wert von 100 bis 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Wir benötigen nur den im roten Rahmen im obigen Bild markierten Teil.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

Manchmal müssen Sie in diesen Stilregeln noch einige Werte selbst eintragen. In dieser Schriftart ist der Wert von font-weight beispielsweise <weight>. Das bedeutet, dass wir hier einen Wert einsetzen müssen. Solche Stellen, an denen ein Wert eingefügt werden muss, sind normalerweise mit <> gekennzeichnet. Die entsprechenden zulässigen Werte finden Sie bei Mozilla.

Für dieses font-weight können wir normal eintragen.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

Fügen Sie diesen Code in das Feld Google Fonts (CSS properties) auf der Einstellungsseite des Plugins ein.

  1. Schließen Sie die Einrichtung ab.

5

  1. Kehren Sie zur Videoseite zurück, dann sehen Sie, dass die Schriftart bereits angewendet wurde. Im folgenden Bild wurden Noto Sans Japanese und Noto Serif Japanese verwendet.

6