Auf meinen Aufruf zum Vorschlag von Themen für die letzten Tage vor Weihnachten bekam ich die Bitte, doch mal auf die Einbindung von Web Fonts einzugehen, die nicht bei Google Fonts gehostet sind und die auch nicht über eine URL von einem anderen CDN eingebunden werden können. Das möchte ich in diesem Artikel gerne tun und auch zeigen, was man hierbei nicht tun sollte.

Eine Web Font selbst hosten

Ein weiterer beliebter Anbieter von kostenfreien Fonts ist Font Squirrel. Hier kann man Schriften herunterladen um sie dann selbst einzubinden. Sehen wir uns also mal am Beispiel der Schrift Aleo an, wie das genau funktioniert.

Zuerst einmal müssen wir einfach die Schriftart über den Button rechts oben runterladen. Die Schrift liegt meistens in einem Format (TTF oder OTF) zum schnellen Download vor. Im Fall von Aleo ist es eine OTF Datei:

Möchte man unterschiedliche Formate oder andere Zeichensätze unterstützen, dann findet man im Reiter „Webfont Kit“ eine entsprechende Auswahl:

In der ZIP-Datei zum Webfont Kit findet man auch passende CSS-Dateien mit dem Code zur Einbindung. Aber hierzu gleich mehr Details. Um die Schriftart nun zu verwenden lädt man sie einfach per FTP, am besten in den Ordner des (Child-)Themes hoch.

Die Web Font verwenden

Die Einbindung des Google Fonts war ja sehr einfach, da eine passende CSS-Datei direkt eingebunden werden kann. Möchte man eine Schriftart selbst hosten, muss man den passenden Code selbst schreiben. Ich möchte hier kurz erklären wie es funktioniert und wie man es nicht tun sollte.

Der wichtigste Teil ist die korrekte Einbindung der verschiedenen Schrifttypen. Im einfachsten Fall sieht das wie folgt aus:

@font-face {
	font-family: 'Aleo';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/Aleo-Regular-webfont.ttf) format('ttf');
}
@font-face {
	font-family: 'Aleo';
	font-style: normal;
	font-weight: 700;
	src: url(fonts/Aleo-Bold-webfont.ttf) format('ttf');
}
@font-face {
	font-family: 'Aleo';
	font-style: italic;
	font-weight: 400;
	src: url(fonts/Aleo-Italic-webfont.ttf) format('ttf');
}
@font-face {
	font-family: 'Aleo';
	font-style: italic;
	font-weight: 700;
	src: url(fonts/Aleo-BoldItalic-webfont.ttf) format('ttf');
}

Jeder Schrifttyp wird über einen eigenen @font-face Block eingebunden. Dabei wird neben dem Dateinamen und dem Format ebenfalls definiert, welchen font-style und welche font-weight sie haben soll. Der Name ist bei allen identisch. Das ist auch genau der Punkt, den viele falsch machen. Ich sehe oft etwas wie folgt:

/* FALSCH! Bitte so nicht einbinden! */
@font-face {
	font-family: 'Aleo';
	src: url(fonts/Aleo-Regular-webfont.ttf) format('ttf');
}
@font-face {
	font-family: 'AleoBold';
	src: url(fonts/Aleo-Bold-webfont.ttf) format('ttf');
}
@font-face {
	font-family: 'AleoItalic';
	src: url(fonts/Aleo-Italic-webfont.ttf) format('ttf');
}
@font-face {
	font-family: 'AleoBoldItalic';
	src: url(fonts/Aleo-BoldItalic-webfont.ttf) format('ttf');
}

Es werden verschiedene font-family Namen verwendet. Im CSS-Code verwenden sie dann diese Namen. Das Problem hierbei ist, dass die Schriftart oft nicht zusammen mit deren Darstellung definiert wird. Wird z.B. die Schrift für das gesamte Dokument auf die „normale Variante“ eingestellt („Aleo“) und dann ein Text durch eine andere Regel fett dargestellt, dann verwendet der Browser die Datei für die normale Variante („Aleo-Regular-webfont“) und stellt diese fett dar. Das optische Ergebnis ist aber sehr viel schlechter, als die Verwendung der korrekten Datei. Man müsste also ständig die font-family ebenfalls in der CSS-Regel setzen, was man gerne mal vergisst. Und man muss sie immer dann ändern, wenn sich der Stil ändert.

Bindet man die Schrift aber wie im ersten Beispiel beschrieben ein, dann erkennt der Browser automatisch, welche Datei die richtige ist. Es schaut sich einfach an, in welchem font-style und mit welcher font-weight der Text dargestellt werden soll und ob es hierzu einen passenden @font-face Block gibt.

Fazit

Ihr habt also gesehen, dass es recht einfach ist, eine eigene Schriftart zu verwenden, auch wenn sie nicht bei Google Fonts oder einem anderen CDN gehostet ist. Wichtig zu beachten: Auch Web Fonts unterliegen Lizenzen. Einige davon sind freie Lizenzen (teilweise mit Einschränkungen), andere sind kommerziell und dürfen nicht online verwendet werden. Bei manchen Anbietern zahlt man auch eine Lizenzgebühr abhängig von der Anzahl der Aufrufe. Informiert euch also immer, ob ihr die Schriftart auch verwenden dürft.

Und wie immer gilt: Weniger ist mehr. Verwendet also bitte nicht 10 verschiedene Schriften auf eurer Website. Eure Leser werden es euch danken, nicht nur aus Performancegründen 😉