Wie du eine Custom Font in Wordpress installierst

Image of Felix Klauke
Felix Klauke

Oft möchte man eine schöne Schriftart benutzen, die jedoch leider nicht bekannt ist. Nicht einmal Google Fonts kann weiterhelfen, dann müssen wir uns wohl selbst helfen.

 

04b_30 - Ein Schreibfehler?

Vor allem auf Webseiten, die sich auf Spiele konzentrieren benutzt man gerne Schriftarten, die sich auch in diesen Spielen wiederfinden. Diese sind jedoch oftmals recht speziell und nicht in Bibliotheken wie Google Fonts enthalten. Im Falle eines Kunden wurde sich die Schriftart 

04b_30

gewünscht. Man könnte meinen, dass es sich hier um einen Schreibfehler handelt. Mitnichten. Es handelt sich um eine Schriftart, deren Webseite beschreibt, man müsst den Netscape Navigator benutzen, um das beste Surferlebnis zu bekommen. Mit anderen Worten: Um diese Font zu benutzen muss man Archäologie studiert haben!

Wenn alles gut läuft, sollte die Font am Ende so aussehen:

Bildschirmfoto 2020-06-13 um 13.30.53

Glücklicherweise gab es die Font zum Download!

 

Font auf den Webserver laden

Die Font wurde zum Download gefunden und kommt im praktischen .zip Archiv-Format. Im Archiv befindet sich die Font als TrueType font (.ttf). Dadurch können wir sie direkt ohne große Umwege als Webfont einbinden. Der erste Schritt lautet also:

  1. Das Archiv herunterladen
  2. Das Archiv entpacken
  3. Die .ttf-Datei hochladen

Der richtige Ort für Fonts ist das Theme, in dem wir die Font benutzen. Würde unser Theme also zum Beispiel font-example-theme heißen, so würden wir die Font hier ablegen:

/var/www/html/wp-content/themes/font-example-theme/fonts

Der Pfad setzt sich dabei aus dem Installationsverzeichnis von Wordpress, dem wp-content Ordner und dem entsprechenden Theme zusammen. 

Hinweis: Im Fall von 04b_30 müsst ihr die .ttf-Datei erste umbenennen, da im Download die Endung in Caps geschrieben ist.

 

font-face in Wordpress definieren

Nachdem die Font nun auf dem Server liegt muss sie noch per CSS importiert werden. Dazu wechseln wir in Wordpress im Theme-Editor in die CSS Datei des Themes und fügen folgendes ein:

@font-face {
  font-family: "04B_30__";
  src: url(https://meinetolleseite.de/wp-content/themes/font-example-theme/fonts/04B_30__.ttf);
  font-weight: normal;
}

Dabei solltet ihr die Url entsprechend mit eurem Pfad oder eurer Seite und eurem Theme anpassen.

Nach einem Klick auf den Datei Aktualisieren Knopf im unteren Bereich ist die Font importiert und wir können sie in unseren normalen CSS Deklaration benutzen.

 

Schriftart einsetzen

Von nun an reicht eine simple Nutzung von font-family um die Schriftart zu setzen:

Bildschirmfoto 2020-06-13 um 13.42.20


Viel Spaß mit eurer eigenen Schriftart in Wordpress! Wenn du Fragen dazu oder zu Wordpress im Allgemeinen hast, kannst du dich gerne bei mir melden:

Termin vereinbaren

Kommentieren

Blog

Verwandte Artikel