Webfonts: Eigene Schriften auf Webseite nutzen

Statt Arial, Helvetica und Times kann man auch eigene Schriften bei der Gestaltung der Webseiten nutzen: Das ist praktisch, da man deutlich freier ist als bei der Wahl der Standard-Systemschriften. Damit die Schrift aber bei dem Besucher auch richtig angezeigt wird, muss man sie mit übertragen. Viele Nutzen dafür Cloud-Dienste zum Beispiel von Google: Man kann den Font aber auch auf dem eigenen Webserver hosten.

Webfonts: Eigene Schriften ohne Cloud

Bei den Webfonts gibt es vier verschiedene Formate: Das neue WOFF Format, das von allen aktuellen Browsern unterstützt wird. Außerdem das TTF (True Type Font) Format: In diesem Format lagen die Windows Systemschriften lange Zeit vor. Schriften im EOT Format sind nur für ältere Versionen des Internet Explorer wichtig, das SVG Format für Schriften wird ebenfalls nicht mehr unterstützt.

Wer spezielle Webfonts herunterlädt, bekommt diese aber in der Regel in mehreren Formaten: Der Browser sucht sich dann die Schrift-Datei aus, die er verwenden kann. In einer speziellen CSS Style Sheet Datei werden die Schriften dann definiert. Das sieht zum Beispiel so aus:

@font-face {
    font-family: 'jrhandregular';
    src: url('jr!ha___-webfont.eot');
    src: url('jr!ha___-webfont.eot?#iefix') format('embedded-opentype'),
         url('jr!ha___-webfont.woff2') format('woff2'),
         url('jr!ha___-webfont.woff') format('woff'),
         url('jr!ha___-webfont.ttf') format('truetype'),
         url('jr!ha___-webfont.svg#jrhandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Diese Style Sheet Datei speichert man zusammen mit den Schrift-Dateien und muss sie anschließend nur noch aus dem head Bereich der Seite verlinken:

<link rel="stylesheet" href="webfont/stylesheet.css" type="text/css">

Mit diesen CSS Anweisungen hat man die “font-family” mit dem Namen “jrhandregular” erstellt und dem Browser die Dateien zum Download gegeben. Jetzt kann man die Schriftart für den Text nutzen:

<p style="font-family:'jrhandregular'">Text</p>

Anschließend wir der Text-Absatz statt mit der normalen Schrift mit dem Handschrift-Font jrhandregular dargestellt. Die Schrift zu unserem Beispiel und auch die fertigen Stylesheet Dateien gibt es kostenlos bei fontsquirrel.com: Auf der Seite werden zahlreiche Webfonts mit allen benötigten Daten zum Download angeboten.