Einbetten von Google Fonts in die WordPress-Site

click fraud protection

Google Fonts ist seit seiner Entwicklung im Jahr 2010 die erste Anlaufstelle für benutzerdefinierte Webtypografie. Es gibt drei Hauptgründe, warum Google hier Vorreiter wurde. Erstens gab es keine anständigen Schriftdienste, also füllte Google die Lücke. Zweitens war das Angebot schon zu Beginn vergleichsweise groß. Derzeit sind über 800 Schriftarten in zahlreichen Stilen verfügbar. Drittens sind diese Schriftarten kostenlos erhältlich, was sie besonders attraktiv macht.

Darüber hinaus lassen sie sich überraschend einfach in Ihre Designprojekte integrieren. Wir zeigen Ihnen, wie Sie diese Google Fonts in Ihre WordPress-Site einbinden können.

Google-Schriften

Um zu beginnen, müssen Sie die Schriftart auswählen, mit der Sie arbeiten möchten. Es gibt eine Vielzahl von Optionen, sodass Sie eine ziemlich große Speisekarte zur Auswahl haben. Sie finden sie, indem Sie zu. gehen Googles Schriftartenseite. Wenn Sie nach einer bestimmten Schriftart suchen, geben Sie einfach den Namen der Schriftart in das Suchfeld ein und es sollte ein Beispiel angezeigt werden.

Es gibt auch andere Suchparameter, die Sie verwenden können. Direkt unter dem Suchfeld befindet sich eine Schaltfläche namens Kategorien. Wenn Sie darauf klicken, wird ein Dropdown-Menü mit fünf Optionen angezeigt. Diese sind wie folgt:

  • Serifen – Dies sind Schriftarten mit kurzen Linien, die aus den oberen und unteren Strichen eines Buchstabens stammen. Times New Roman und Sylfaen sind gute Beispiele.
  • Sans Serif – Wie der Name schon sagt, handelt es sich um Schriftarten ohne diese kleinen Linien. Sie neigen dazu, eine einfache und saubere Ästhetik zu haben.
  • Display – Dies sind so genannte aufmerksamkeitsstarke Schriftarten. Sie eignen sich am besten für Überschriften und nicht für langen Text.
  • Handschrift – Diese Schriftarten lassen es so aussehen, als hätte sie jemand von Hand geschrieben. Sie werden feststellen, dass viele kursiv geschrieben sind oder weniger konsistente Abstände haben.
  • Monospace – Wie bei einer Schreibmaschine nehmen ihre Buchstaben die gleiche horizontale Breite ein. Sie sind sehr gleichmäßig verteilt.

Darüber hinaus haben Sie auch andere Optionen zur Auswahl, z. B. die Auswahl der Sprach- und Schriftarteigenschaften. Letzteres umfasst die Anzahl der Stile, Dicke, Neigung und Breite.

Einbetten von Schriftarten in WordPress

Wenn Sie diese einzigartigen Schriftarten in Ihre WordPress-Site einbinden möchten, gibt es mehrere Methoden, die Sie ausprobieren können.

CSS verwenden

Klicken Sie auf die Schriftart aus der Auswahl von Google und Sie gelangen zur detaillierten Schriftartenseite. In der oberen rechten Ecke befindet sich ein „+“-Zeichen. Klicken Sie darauf und es öffnet sich ein Seitenfenster. Klicken Sie auf „Einbetten“.

Jetzt können Sie klicken @importieren. Dadurch wird der CSS-Code geöffnet, den Sie kopieren müssen. Gehen Sie zum Stylesheet Ihres WordPress-Themes und fügen Sie es am Anfang ein. Stellen Sie sicher, dass Sie den Importlink ohne die  Klammern. Stellen Sie sicher, dass Sie speichern, und Sie haben die Schriftart hinzugefügt.

PHP verwenden

Folgen Sie den ersten Schritten und kopieren Sie den Link, den Sie erhalten, nachdem Sie auf das „+“-Zeichen geklickt haben. Fügen Sie es jetzt einfach der Datei header.php Ihres Themes hinzu. Denken Sie daran, zu speichern, damit die Schriftart hinzugefügt werden kann.

Verwenden einer Javascript-Funktion

Sie können auch etwas versuchen, das als "Einreihen in die Warteschlange" bekannt ist. Dazu müssen Sie die Funktion wp_enqueue_style verwenden. Mit dieser Methode können Sie die gewählte Schriftart zum Header-Bereich aller Ihrer Website-Seiten hinzufügen. Es ist eine großartige Möglichkeit, mehrere Änderungen gleichzeitig hinzuzufügen.

Holen Sie sich einfach den Link der Schriftart (von http bis zum ”) und fügen Sie ihn mit zusätzlichem Code in die Datei functions.php Ihres Themes ein. Hier ist der Code, den Sie verwenden müssen:

Funktion custom_add_google_fonts() {

wp_enqueue_style( ‚custom-google-fonts‘, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, falsch );

}

add_action( ‚wp_enqueue_scripts‘, ‚custom_add_google_fonts‘);

Jede dieser Optionen funktioniert gut, um Google Fonts in Ihre WordPress-Website zu integrieren, daher ist es wichtig, diejenige auszuwählen, mit der Sie sich am wohlsten fühlen.