Fonts in Webseiten einbinden

Dienstag, 29. Juli 2014, 23.41 Uhr

Lange Zeit war man im Web in Sachen Schriften darauf angewiesen, dass die benutzten Fonts auf den Computern der Besucher installiert waren – andernfalls griff der Browser auf seine Standardfonts zurück und alle Layoutmühe war für die Katz. Im Laufe der Zeit haben sich so eine Handvoll Fonts als kleinster gemeinsamer Nenner etabliert, allen voran die Arial. Inzwischen ist es allerdings kein Problem mehr, praktisch beliebige Fonts auf Webseiten einzusetzen, die bei Bedarf vom Server nachgeladen werden.

Davon macht auch damaschke.de Gebrauch. Als Brotschrift wird die Source Sans Pro von Paul Hunt, für das Logo die Libre Baskerville von Impallari Type benutzt (ich würd’ gern die echte Baskerville benutzen, aber die ist leider nicht frei verfügbar).

Anfangs habe ich die Fonts von Google Fonts nachgeladen. Das ist zwar eine sehr einfache, allerdings auch etwas unbefriedigende Lösung, muss doch der Browser beim Aufruf von damaschke.de den Google-Server kontaktieren, womit mindestens die Browserdaten des Besuchers der Seiten nolens volens in den Datenbanken von Google landen.

Eines der Ziele beim Redesign von damaschke.de bestand darin, diese Situation zu ändern und die Fonts auf dem eigenen Server zu hosten. Da man die Fonts bei Google nicht nur vom Server einbinden, sondern die Schriftdatei auch herunterladen kann, sollte das im Prinzip kein Problem sein. Ist es auch nicht: Nach ein paar Fehlschlägen und mit der Hilfe eines kenntnisreichen Freundes wurde das Ziel erreicht. Wer heute damaschke.de aufruft, muss nicht befürchten, dass er unwissentlich auch gleich bei Google vorbeischaut.

Im Prinzip ist das Einbinden von Fonts in CSS ein Kinderspiel und sieht ungefähr so aus:

@font-face {
  font-family: 'Name';
  src: url('Pfad') format('Format');
}

Der Name der Schriftfamilie ist dabei frei wählbar und muss nicht unbedingt mit dem Namen des Fonts übereinstimmen. Anschließend lässt sich der Font problemlos einsetzen:

body {
  font-family: 'Name';
}

In der Praxis ist das allerdings nicht ganz so einfach. Nicht alle Browser können damit korrekt umgehen, nicht alle Browser können mit den benutzte Fontdateiformaten etwas anfangen. Das lässt sich umgehen, in dem man mehrere Schriftdateien referenziert und es dem Browser überlässt, welche Datei er tatsächlich lädt. Blöd nur, dass Google anscheinend nur TTF anbietet und das von allen modernen Browsern unterstützte und deutlich kompaktere Format WOFF außen vor bleibt. Doch hier hilft der Webfont-Generator von Fontsquirrel weiter. Dem übergeben Sie die eine Datei des Fonts (etwa TTF) und bekommen nach kurzer Zeit eine ZIP-Datei mit allen Fontdateien und einer CSS-Datei zurück, die Sie einfach übernehmen können. (Nebenbei: Wer überhaupt nichts mit Google zu tun haben will, kann die Fonts auch bei Fontsquirrel herunterladen und anschließend konvertieren.)

So weit, so gut. Bleibt nur noch das Problem, dass der Browser bei einem <strong> oder <em> natürlich die entsprechenden Schriftschnitte benutzen und nicht einfach selbst an den Fonts herumpfuschen soll. Aber auch das lässt sich leicht erzielen. Dafür müssen den verschiedenen Schnitten – etwa Source Sans Pro Regular, Source Sans Pro Semibold und Source Sans Pro Italic – zuerst jeweils über @font-face eingebunden werden. Als font-family bekommen sie alle den gleichen Namen – in diesem Beispiel also Source Sans Pro. Zusätzlich muss noch über font-weight und font-style angegeben werden, ob es sich um den normalen, den fetten oder den kursiven Schriftschnitt handelt. Fontsquirrel geht übrigens immer davon aus, dass Sie die Grundversion einer Schrift konvertieren lassen und setzt den CSS-Code entsprechend, hier müssen Sie also kurz selbst Hand anlegen.

Bei damaschke.de sieht das zum Beispiel so aus (ich hab die Pfadangaben mal gekürzt, statt „Regular“, „Bold“ und „Italic“ stehen da natürlich die genauen Pfadangaben der Schriftdateien – wer’s genau wissen will, wirft einfach einen Blick in die CSS-Datei):

@font-face {
  font-family: 'Source Sans Pro';
  src: url('Regular') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('Bold') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('Italic') format('woff');
  font-weight: normal;
  font-style: italic;
}

Natürlich bietet @font-face noch sehr viel mehr Möglichkeiten, aber ich bin kein Typograph – mir reicht vorerst das, was ich zu diesem Thema im Zuge des Redesigns gelernt habe. Alles andere hat Zeit bis zum nächsten Redesign ;-).


Ihr Kommentar Name (erforderlich):

Mail (wird nicht publiziert) (erforderlich):

Website:

Ein Kommentar zu „Fonts in Webseiten einbinden“

Danke für den Tipp. @font war mir zwar irgendwie bekannt. Aber, dass das im Prinzip so einfach ist, hätte ich nicht gedacht. Künftig fällt auf meiner Seite der „Umweg“ über Google-Fonts auch fort.
lg Jochen K.