Schon seit einiger Zeit gibt es die Möglichkeit, mittels downloadbarer Schriften oder Web-Fonts auch andere als die installierten Systemschriften im Browser anzuzeigen. Spätestens seit CSS3 ist es über @font-face kein Problem mehr, statt der allgegenwärtigen Verdana mit den „attraktiv“, weil falsch rum stehenden Anführungszeichen auch vernünftige Schriften plattformübergreifend zu verwenden. Internet-Dienste wie Google Fonts machen es dem Web-Master leicht: Auf die Seite gehen, Schrift aussuchen, „Quick Use“ anklicken und den angezeigten Code in die eigene Webseite aufnehmen, fertig. Die Schrift wird dabei beim Anbieter (in diesem Fall Google) direkt gehostet, man braucht sich um nichts weiter mehr kümmern. Auch Blog- und andere Content-Management-Systeme wie z.B. WordPress machen Gebrauch von dieser Möglichkeit, so werden zum Beispiel beim aktuellen WordPress-Theme „Twenty Thirteen“, das auch hier Verwendung findet, die standardmäßig verwendeten Schriftarten Bitter und Source Sans Pro direkt von Google Fonts eingebunden.
Doch was, wenn man die Fonts lieber selbst unter Kontrolle haben auf dem eigenen Webspace hosten möchte?
Eigentlich ist das auch ganz einfach, doch der Teufel liegt im Detail und es gibt ein paar Fallstricke, die ich hier kurz dokumentieren möchte.
1. Schriftarten aussuchen und Lizenz prüfen
Der erste Schritt ist natürlich immer, sich erst einmal Gedanken zu machen, was man haben will und Schriften auszusuchen, die gut lesbar sind und zueinander passen. Bei der Auswahl von Schriften kann man viel falsch machen und man muss sich eigentlich eingehend mit Typographie beschäftigen, will man ein gutes Ergebnis erzielen. Für meine konkrete Anwendung wollte ich mich daher darauf beschränken, die im bereits erwähnten und hier verwendeten WordPress-Theme Twenty Thirteen benutzten Schriften nicht mehr von Google, sondern von meinem eigenen Webspace aus einzubinden.
Man sollte an dieser Stelle auch gleich die Lizenz, unter der die Schriftart steht, darauf prüfen, ob überhaupt erlaubt ist, den Font in eine Webseite einzubinden. Die bei Google Fonts oder auch FontSquirrel angebotenen Schriften stehen zumeist unter der SIL Open Font Licence, die das erlaubt.
2. Schriftart herunterladen
Als nächstes holt man sich den Font zunächst mal zu sich. Bei Google Fonts klickt man dazu auf der Seite zum Font auf den kleinen Runter-Pfeil ganz rechts, den man angesichts der Prominenz, mit der einem der Code zum Einbinden direkt von Google aus angeboten wird, auch mal übersieht. Auch beim schon erwähnten FontSquirrel kann man jede Menge freie Schriften finden und herunterladen.
3. Schrift fürs Web konvertieren
Üblicherweise bekommt man dabei ein ZIP mit ein paar TrueType- oder OTF-Dateien darin. Das Problem: Zur Einbindung in eine Webseite braucht man je nach Ziel-Browser eine WOFF-, EOT- oder SVG-Datei. Praktischerweise braucht man für die Konvertierung nicht mal eine Software zu installieren, sondern kann einen Web-Dienst wie den FontSquirrel Webfont Generator verwenden. Man lädt dort seine TTF- oder OTF-Dateien hoch und bekommt ein ZIP-Archiv mit den selben Fonts in WOFF, EOT, SVG und TTF zurück. Mit diesen Formaten kann man alle gängigen Browser in aktuellen und nicht mehr ganz so aktuellen Versionen bedienen. Beschränkt man sich auf die aktuellen Versionen, sollte das WOFF (Web Open Font Format) eigentlich schon reichen.
Man muss noch beachten, dass man bei einer Schrift, die in mehreren Stilen bzw Schriftschnitten (wie fett oder kursiv) vorliegt, auch alle die hochlädt, die man später auf der Webseite verwenden will. Tut man das nicht oder macht bei einem der folgenden Schritte einen Fehler, wird der Browser aus dem normalen Stil die anderen Stile selbst berechnen, was meistens zwar funktioniert, aber schlechter aussieht.
FontSquirrel legt praktischerweise zusätzlich zu den Schriftarten in allen benötigte Formaten auch noch eine stylesheet.css mit den passenden @font-face-Definitionen sowie HTML-Testseiten dazu.
4. Stylesheet anpassen
Die @font-face-Definitionen aus der stylesheet.css müssen entweder verlinkt oder in die eigene CSS-Datei eingebaut werden.
Bei WordPress kann man z.B. die @font-face-Definitionen in die style.css des verwendeten Themes an den Anfang stellen (unter Design – Editor).
Dabei sind aber noch kleine Anpassungen erforderlich, insbesondere, wenn eine Schrift mit mehreren Stilen importiert wurde. Das von FontSquirrel generierte CSS sieht beispielsweise so aus:
@font-face {
font-family: 'bitterregular';
src: url('bitter-regular-webfont.eot');
src: url('bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('bitter-regular-webfont.woff') format('woff'),
url('bitter-regular-webfont.ttf') format('truetype'),
url('bitter-regular-webfont.svg#bitterregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bitteritalic';
src: url('bitter-italic-webfont.eot');
src: url('bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('bitter-italic-webfont.woff') format('woff'),
url('bitter-italic-webfont.ttf') format('truetype'),
url('bitter-italic-webfont.svg#bitteritalic') format('svg');
font-weight: normal;
font-style: normal;
}
Hier wurde der selbe Font Bitter in zwei Varianten verwendet, aber in der generierten CSS wurden zwei getrennte Schriftarten daraus, die zudem noch unterschiedliche Namen haben. Die CSS sollte man also bei font-family, font-style (für kursive Schriften) und ggf. font-weight (für fette Schriften) wie folgt ändern (siehe Hervorhebung):
@font-face {
font-family: 'Bitter';
src: url('bitter-regular-webfont.eot');
src: url('bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('bitter-regular-webfont.woff') format('woff'),
url('bitter-regular-webfont.ttf') format('truetype'),
url('bitter-regular-webfont.svg#bitterregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Bitter';
src: url('bitter-italic-webfont.eot');
src: url('bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('bitter-italic-webfont.woff') format('woff'),
url('bitter-italic-webfont.ttf') format('truetype'),
url('bitter-italic-webfont.svg#bitteritalic') format('svg');
font-weight: normal;
font-style: italic;
}
Der Wert von font-style ist entweder „normal“ oder „italic“, bei font-weight setzt man üblicherweise entweder „normal“ oder „bold“. Wenn die Schrift auch in anderen Schriftstärken (Schriftgewichten) vorliegt, trägt man bei font-weight eine Zahl zwischen 100 und 900 ein. Natürlich müssen die Angaben zur Schriftdatei passen, sonst sieht das Ergebnis merkwürdig aus.
Wenn die Schriftdateien nicht im selben Verzeichnis wie die CSS liegen, muss außerdem noch die URL angepasst werden, beispielsweise so (anderes Beispiel mit fettem Schriftstil):
@font-face {
font-family: 'Bitter';
src: url('https://static.spontan-wild-und-kuchen.de/fonts/bitter-bold-webfont.eot');
src: url('https://static.spontan-wild-und-kuchen.de/fonts/bitter-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('https://static.spontan-wild-und-kuchen.de/fonts/bitter-bold-webfont.woff') format('woff'),
url('https://static.spontan-wild-und-kuchen.de/fonts/bitter-bold-webfont.ttf') format('truetype'),
url('https://static.spontan-wild-und-kuchen.de/fonts/bitter-bold-webfont.svg#bitterbold') format('svg');
font-weight: bold;
font-style: normal;
}
Doch Vorsicht: Wenn die Schriftdateien nicht auf dem gleichen Server wie die Webseite liegen – eine andere Subdomain reicht schon! – ist vermutlich noch eine kleine Änderung an der Serverkonfiguration angesagt, wenn das ganze auch mit dem Firefox funktionieren soll.
5. Dateien hochladen
Dazu braucht man wohl nicht viel zu sagen, außer, dass der Ort natürlich der sein sollte, den man auch ins CSS geschrieben hat.
6. Serverkonfiguration prüfen
An dieser Stelle gilt es noch, die Serverkonfiguration zu prüfen, insbesondere wenn das Einbinden der Schrift noch nicht mit allen Browsern funktioniert. Insbesondere Firefox ist da etwas wählerisch und lädt standardmäßig Schriften nur vom selben Host, auf dem auch die Webseite liegt. Firefox lässt sich aber überreden, die Datei auch von woanders anzunehmen, wenn der Server im HTTP-Header Access-Control-Allow-Origin „*“ schickt. Es empfiehlt sich dann auch gleich, in der Konfiguration noch die MIME-Types für die Font-Dateien einzutragen. Sofern man keinen Direktzugriff auf die Serverkonfiguration hat (z.B. beim Webhoster) oder dort nichts ändern will, lässt sich das am einfachsten über eine .htaccess-Datei, die im selben Verzeichnis wie die Fonts zu liegen hat, erledigen. Dort steht dann (für Apache, den die meisten Hoster verwenden) folgendes drin:
AddType application/font-woff .woff
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
<FilesMatch "\.(woff|ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
7. Für WordPress-User: Theme anpassen
Die Stylesheet-Änderungen aus Punkt 4 gehören wie schon geschrieben in die style.css des verwendeten Themes. Bei TwentyThirteen beispielsweise muss man nun noch dem Theme austreiben, doch den Link auf Google Fonts zu setzen. Das ist leider etwas versteckt in der functions.php in der Funktion twentythirteen_fonts_url(). Hier muss man dafür sorgen, dass diese Funktionen einen Leerstring zurückgibt, sonst baut WordPress einen <link>-Tag auf ein Google Fonts-Stylesheet ins HTML ein. Am einfachsten und am wenigstens destruktiv ist das, wen man an den entscheidenden zwei Stellen ein „on“ durch ein „off“ ersetzt:
…
$source_sans_pro = _x( 'off', 'Source Sans Pro font: on or off', 'twentythirteen' );
…
$bitter = _x( 'off', 'Bitter font: on or off', 'twentythirteen' );
…
8. Fertig
Die Web-Fonts können nun im CSS mit font-family verwendet werden.
Update
In den neuen Versionen von WordPress werden auch im Admin-Bereich Fonts von Google nachgeladen. Jegliches Nachladen von Google-Fonts in den Standard-Themes „Twenty Twelve“, „Twenty Thirteen“ und „Twenty Fourteen“ sowie im Admin-Bereich wird vom WordPress-Plugin „Disable Google Fonts“ unterbunden. Dieses Plugin schaltet die Google-Fonts aber einfach aus. Es ist dann keine Hilfe, wenn man in der Außendarstellung die Schriftarten weiter nutzen und selber hosten will.
