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. 😉

Kurzgesagt: Wenn WordPress deine Lieblingsschriftart lokal bezieht, freuen sich deine Nutzer. Auch Webfonts kannst du als Datei lokal einbinden!

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 zeigte sich häufiger, 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.

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 WordPress?

Grundsätzlich existieren zwei unterschiedliche Varianten. Die Schriftarten via CSS hinzufügen oder mittels Plugin. Letztere Methode erscheint besonders einfach und reizvoll. Aber halte bitte Abstand davon und spare ein unnötiges Plugin ein! Versuche die bessere Methode! Wir helfen dir dabei!

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 Child-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 und den Pfad deines Uploads anpassen! 😉

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.

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 Code-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 Verzeichnisstruktur 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 „./assets/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. Also dem Stylesheet deiner Website.

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“ (Typografie) hinzufügen und innerhalb von bestimmten Bereichen verwenden.

Bei GeneratePress lassen sich zwar die Schriften an dieser Stellet einstellen, aber nicht hochladen. Das notierte Prozedere entfällt somit nicht. Du kannst hier allerdings benutzerdefinierte Einstellungen einfacher vornehmen, als dies üblicherweise der Fall war. Beispielsweise lassen sich so unterschiedliche Schriftarten, Größen, Zeilenabstände, Laufweite usw. je nach Verwendung (Überschrift, Zitate, Fließtext) einstellen.

Exkurs: GeneratePress

Mit dem Theme GeneratePress erhältst du die Option, deine Text-Blöcke im Stil zu verändern und auch unterschiedliche Schriften zu verwenden. Vorher legst du jedoch zentral deine Schriftarten über den Customizer fest. Dort sind allerdings unzählige Google-Fonts hinterlegt, welche wir nicht nutzen wollen. Warum fragst du dich?

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 Code müssen in deine functions.php eingefügt werden und schon verwendet GeneratePress (ab Version 3.2.0) keine externen Schriftarten mehr von Google.

# GeneratePress - Deactivate Google Fonts loading
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-google-fonts' );
}, 99 );

# GeneratePress - Remove Google Fonts from Customizer / Block-Editor
add_filter( 'generate_font_manager_show_google_fonts', '__return_false' );

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. Im Feld „font family name“ den genauen Namen angeben. Gut möglich, dass du nicht nach der Schriftart suchen kannst, da der Customizer diese nicht automatisch erkennt und findet.

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

Eine gute Methode um deine Schriftart auch im Theme-Customizer von GeneratePress auf deiner Webseite auszuwählen, sind folgende Zeilen. Füge diese zur functions.php deines GeneratePress Child-Themes hinzu und schon erscheint die Schriftart wie von Zauberhand im Dropdown der Einstellungen. Achte erneut darauf den Namen korrekt zu schreiben, da es sonst zu unerwünschten Fehlern kommen kann.

# GeneratePress - 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.

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' );

Exkurs: Plugins

Einzelne Plugins benötigen Informationen zu unserer Standard-Schriftart. Meist gibt es dazu passende Anleitungen:

• Slider Revolution

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.

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

Exkurs: Schriftarten

Schriftarten unterscheiden sich in der Benutzung von Serifen. Dementsprechend existieren serifenlose und Schriften mit Serifen. Dieser kleine Querstrich am Ende der Buchstabenbalken kann auf unterschiedliche Arten ausgebiltet sein.

• Times New Roman ist sicherlich die bekannteste Serifen-Schriftart.
• Arial ist eine serifenlose Schrift, die durch große Mittellängen und einfache Formen charakterisiert wird.

Nicht alle, aber sehr viele Schriften aus dem Printbereich, besitzen bereite ein Webschriften-Äquivalent. Dies hängt unter anderen daran, dass Printtexte häufig aus Serifen-Schriften formuliert werden. Durch diese Querverbindungen erhalten unsere Augen eine imaginäre Linie und gleiten von Wort zu Wort. Aufgrund der Pixel eines Monitors werden Serifen eventuell verpixelt dargestellt, was bei Fließtexten für dein Auge unscharf wirken kann. Daher solltest du eine serifenlose Schrift verwenden. Bei höheren Schriftgrößen ist dier Effekt nicht so drastisch:

• Für Web-Fließtexte und Schriften in geringer Größe: serifenlose Variante
• Für Auszeichnungen und hohe Schriftgrößen, können Serifen verwendet werden

Zur Prüfung gibst du den Namen deiner Schriftart in Zusammenhang mit „Webfont“ an. Und schon landen wir bei den Dateiformaten, denn „woff“ oder „woff2“ sind typische Webformate.

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

Schriftart umwandeln

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 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 mit anderen Tools 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?