Schriftart hinzufügen

Wenn du bereits weißt, dass du eine spezielle Schriftart in dein WordPress integrieren möchtest, dann erklären wir dir die Varianten. Für alle anderen beginnt dieser Text mit den Vorteilen eigener Schriftarten. 😉

Warum lokale Schriftarten sinnvoll sind

Nutzt du auf deiner Webseite eine Webschrift, wird diese über einen externen Server bereitgestellt. Daher werden diese Bibliotheken auch Drittanbieter genannt. Typischerweise verwenden WordPress-Themes an dieser Stelle Google Fonts. Daher kommuniziert deine Webseite zunächst mit einem Server von Google, um die Schrift anzuzeigen. Diesen Prozess musst du in deiner Datenschutzerklärung angeben!

Das lokale Bereitstellen der Fonts ist daher schon aus Datensparsamkeit angebracht. Zudem musst du dich nicht auf die Dienste der Drittanbieter verlassen, zumeist erhöht sich die Geschwindigkeit deiner Seite und du kannst die Schriften cachen.

Der schwerwiegendste Nachteil hängt an der Formatvielfalt. Es ist wichtig, zumindest alle fünf Formate bereitzustellen, damit keine ungewollten Darstellungen entstehen. Zwar sind WOFF bzw. WOFF2 weit verbreitet aber in den eigenen Test hat sich häufiger gezeigt, dass die anderen Formate (EOT, TTF, SVG) wichtig sind. Gerade beim Prüfen mit verschiedenen Browsern bin ich als Autor und Tester bald wahnsinnig geworden 😉

Woher bekommst du deine Schriftart?

Je nachdem, welche Schriftart du lokal einbinden möchtest, einer deiner ersten Schritte sollte dich auf den Google Webfonts Helper von Herokuapp.com führen. Wenn du deine Wunsch-Schrift hier findest, sind die folgenden Schritte deutlich einfacher. Wir zeigen dir diese anhand der Schriftart Roboto.

Suche nun auf der linken Seite die Schrift, die du herunterladen möchtest.

Zunächst suchst du dir deine Schriftart aus

Im nächsten Schritt kannst du dir deine Varianten aussuchen. Zügel dich an dieser Stelle, zumindest etwas! Je mehr Schriftschnitte und Varianten du verwendest, desto mehr Last erzeugt deine Webseite. Also verwende nur Schriften, die du auch einsetzen wirst und setze nur eine begrenzte Anzahl ein.

Den dritten Schritt, also die CSS-Angaben, benötigen wir nachher noch einmal. Lass das Browserfenster daher geöffnet! Für den Moment genügt es uns, wenn wir die Daten herunterladen. Du lädst dir einen als ZIP komprimierten Ordner herunter und wir werden diesen in den nächsten Schritten weiterverarbeiten.

Wie fügst du eine lokale Schriftart in dein WP?

Grundsätzlich existieren zwei unterschiedliche Varianten. Die Schriftarten via function.php einfügen oder mittels Plugin. Letztere Methode erscheint besonders einfach und reizvoll. Aber halte bitte Abstand davon! Versuche die bessere Methode! Wir helfen dir dabei!

Schriften via function.php einfügen

Die idealste Methode um deine neue Schriftart zukünftig auf deiner Webseite zu verwenden, sind folge Zeilen.

# Generate typography default font
add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'Roboto';
    return $fonts;
}

Diese Zeilen kannst du in deine functions.php einfügen, ist aber keine Bedingung.

Schriftarten via FTP hochladen

Zunächst erstellen wir uns im Ordner des Child-Themes eine passende Verzeichnisstruktur. Lass dich hier von der Struktur deines Eltern-Themes leiten. Häufig existiert der Ordner „assets“ mit dem Unterordner „fonts“. Diese nutzen wir hier ebenfalls. Die Verzeichnisstruktur schaut nun wie folgt aus: wp-content/themes/generatepress_child/assets/fonts/

Anstatt „generatepress_child“ wird bei dir der Name deines Themes stehen.

In dieses Verzeichnis lädst du die gewünschten lokalen Schriftarten hoch, also den entpackten Ordner. Oder du lässt den Ordner über deinen FTP-Manager automatisch entpacken. Nun haben wir eine URL-Struktur, die wir weiter verwenden können. Ob die Schriften funktionieren kannst du testen, indem du die URL aufrufst: https://deinwp.de/wp-content/themes/generatepress_child/assets/fonts/roboto-v29-latin-regular.svg

Anstatt https://deinwp.de musst du selbstverständlich deine Domain einsetzen! 😉

Schriften via WordPress hochladen

Wenn du keinen direkten Zugriff auf deinen Server hast oder du die Schriften via WordPress hochladen möchtest, geht dies auch. Allerdings musst du hierzu das Hochladen dieser Daten erlauben.

So kannst du Schriften über die Medienübersicht hochladen.
Aus der URL a la /fonts/ wird dann eine URL wie /uploads/2021/11/

Egal wie du deine Fonts auf deinen Server bekommst, nun müssen wir @font-face nutzen. Damit dein WordPress die neuen Schriftarten kennenlernt, musst du beide miteinander bekannt machen. Hierzu wird ein CSS-Eintrag benötigt, der folgende Informationen enthält:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Bei „..“ musst du deine Webseite und die jeweilige Verzeichnissstrukur eintragen. Also in unserem Fall, lautet die komplette URL wie folgt: https://deinwp.de/wp-content/themes/generatepress_child/assets/fonts/Brandon_reg.woff2

Um den Pfad dynamisch zu halten, kannst du „./asstes/fonts/roboto-v29-latin-regular" verwenden, dann wird automatisch im verwendeten Child-Theme nach dem Ordner und der Schriftart gesucht.

Hast du noch den besagten Tab geöffnet? Dann kannst du im Schritt 3 den erwähnten Ordner-Präfix angeben:

Durch diesen Schritt entfällt die lästige Arbeit die CSS-Informationen händisch aufzubauen. Du kannst alle Zeilen kopieren und in die style.css einfügen.

Schriften über dein Theme hinzufügen

Einige Themes, wie Divi, Elementor oder Generatepress bringen eigene Font-Manager mit. Hier kannst du in den Einstellungen eine „Typography“ hinzufügen und innerhalb von bestimmten Bereichen verwenden.

Bei Generatepress lassen ich zwar die Schriften an dieser Stelle einstellen aber nicht hochladen. Das notierte Prozedere entfällt somit nicht. Du kannst diese allerdings einfacher verwenden.

Exkurs: Generatepress

Du hast sicherlich schon einmal gelesen, dass die Verwendung von Google Fonts datenschutzrechtlich schwierig sein kann. „Keiner“ weiß genau, welche Daten über die Autobahn nach Amerika gesendet werden, wodurch eine Deaktivierung dieser Schriften sinnvoll ist. Zum Glück ist dies schnell zu bewerkstelligen! Folgende Zeilen müssen in deine function.php eingefüt werden und schon verwendet Generatepress keine Schriftarten mehr von Google.

# Remove Google Font 
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-fonts' );
} );

# Remove Google Font from the customizer
add_action( 'admin_init', function() {
    add_filter( 'generate_google_fonts_array', '__return_empty_array' );
} );

Im Nachgang können wir die eigene Schriftart hinzufügen. Hierfür klickst du im Menüpunkt Design –> auf den Customizer –> und dann auf Typographie –> und wählst „Add Font“ aus.

Um eine lokale Schriftart hinzuzufügen, muss diese allerdings vorher hochgeladen werden. Und hier hilft uns das Wissen aus dem ersten Abschnitt!

Exkurs: Elementor

Die standardisiert verwendeten Google Fonts lassen sich ebenfalls zügig deaktivieren. Hierzu direkt am Anfang der functions.php folgende Zeile einfügen:

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Schriften via Plugin hinzufügen

Diese Methode ist einfach, jedoch grundsätzlich unnütz 😉 Jedes Plugin „belastet“ dein System. Jedes Fremd-Plugin birgt ein Risiko für Inkompatibilitäten oder im Bereich der Sicherheit. Ausführlich haben wir uns der Thematik hier gewidmet.

Plugin suchen (beispielsweise „Use Any Font“), installieren und den Anweisungen folgen. Zumeist lädst du deine Schriftart hoch.

Screenshot von Use Any Font in der Version 6.1.7

und stellst im zweiten Schritt ein, wann welche Schriftart verwendet werden soll.

Du kannst dediziert angeben, wann welche Schriftart verwendet werden soll

Exkurs: Schriftart umwandeln

Folgende fünf Formate solltest du für eine maximale Kompatibilität bereithalten.

  • eot = embedded-opentype = IE6-IE8
  • woff2 = Super Modern Browsers
  • woff = Modern Browsers
  • ttf = truetype = Safari, Android, iOS
  • svg = Legacy iOS

Eventuell ist deine Schriftart nicht in jedem benötigten Format verfügbar. Dann kannst du sie online ganz einfach umwandeln. Wichtig zu beachten ist hier, dass du auf die Lizenzierung achtest und nur Schriften umwandelst, welche du auch besitzt und die Erlaubnis dafür hast. Du kannst z.B. mit Font Squirrel kannst du Schriften, welche im TrueType- oder OpenType-Format (*.ttf, *.otf) vorliegen, mit wenigen Klicks umwandeln. Lade dazu einfach deine Datei hoch und folge den Einstellungen.

Du kannst deine Schriftart auch vorher konvertieren, konvertieren und konvertieren. Je nach Website, Konverter sowie auch Anzahl von Schriftschnitten musst du für die Umwandlung bezahlen, mehrere Konverter nutzen oder Geduld mitbringen.

Hat das Einbinden deiner Schriften funktioniert oder sind Fragen offen geblieben?

Schreibe einen Kommentar