@font-face – Fonts in Webseiten einbetten

Eigene Webfonts in HTML-Seiten einbinden

Seitdem die modernen Browser @font-face in wunderbarer Harmonie unterstützen, können ladbare Fonts mit ausreichender Sicherheit in Webseiten eingebettet werden.

Webfonts liegen nicht auf dem System des Besuchers, sondern werden (ähnlich wie Bilder) vom Browser des Besuchers geladen – entweder aus einem Verzeichnis des Servers oder von einem CDN (Content Delivery Network) – und mit der @font-face-Regel in die CSS-Datei eingebunden.

Welches Format für den Webfont?

Obwohl alle Browser Webfonts unterstützen, brauchten sie anfänglich unterschiedliche Formate: TTF, WOFF, EOT und SVG.

Microsoft bot bereits mit IE4 das Einbinden von Fonts für Webseiten im EOT-Format (Embedded OpenType – eine kompakte Form von OpenType-Schriften, die von Microsoft für Webseiten entwickelt wurde), das aber nur von IE unterstützt wurde. Seit 2011 unterstützen alle modernen Browser Schriften im Woff-Format. TTF, EOT und SVG (wurde von Firefox und IE sowieso nie unterstützt) müssen nicht mehr als Alternative angeboten werden.

Einzig und allein IE11 unterstützt das heute gängige Format WOFF2 nicht.

WOFF Fonts
IE9
Chrome 5.0
Firefox 3.6
Safari 5.1
Opera 11.1

Google Webfonts einbetten

Bei den Google Webfonts kümmert sich Google selber um die Liste der Alternativen – das macht das Einbinden von Schriften via Google Webfonts so einfach.

Webfont mit Link einbinden
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic' 
    rel='stylesheet' 
    type='text/css'>
Webfont in CSS übernehmen
body { font-family:'Roboto',sans-serif;font-weight:300 }

Das Einbinden des Fonts als Link im Head der Seite kostet einen zusätzlichen HTTP-Request. Der Aufruf der URL aus dem Quicklink spielt den Inhalt der CSS-Datei ein. Die font face Regel kopieren und in die eigene CSS-Datei setzen:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

Die local Anweisung der @ font face Regel prüft, ob der Font nicht bereits beim Besucher vorhanden ist.

Google Fonts vom eigenen Server

Google Fonts können auch bei Google heruntergeladen und dann von einem Verzeichnis des eigenen Webspace aus bedient werden.

Google Fonts kopieren bei https://google-webfonts-helper.herokuapp.com/fonts/ und in einen Fonts-Ordner des eigenen Webspace speichern.

In der @font face Regel muss dann nur die Quelle – src – auf die eigene URL des Schriftordners geändert werden

@font-face {
   font-family:'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
   url(/fonts/roboto-v18-latin/roboto-v18-latin-regular.woff2) format('woff2'),
   url(/fonts/roboto-v18-latin/roboto-v18-latin-regular.woff) format('woff');
}

@font-face {
   font-family:'Roboto';
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'),
   url(/fonts/roboto-v18-latin/roboto-v18-latin-300.woff2) format('woff2'),
   url(/fonts/roboto-v18-latin/roboto-v18-latin-300.woff) format('woff');
}

Eigene Webfonts in HTML-Seiten

Wenn wir eine Schrift kaufen, wird das Einbinden der alternativen Webfont-Formate aufwändiger als das direkte Einbinden eines Google-Webfonts via link-Element.

Der Webfont-Generator bei FontSquirrel wandelt Schriften im TTF- oder OTF-Format in die Webfont-Varianten für die verschiedenen Browser um, sofern die Lizenz der Schrift die Umwandlung gestattet. Der Download enthält eine CSS-Datei mit der font-face-Regel sowie die Webfonts in EOT, WOFF, TTF und SVG.

Webfont mit @font-face einbinden
@font-face {
    font-family: 'pradaregular';
    src: url('prada-webfont.woff2') format('woff2'),
         url('prada-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Kerning, Hinting

Das Umwandeln eigener Schriften in Webfonts eröffnet Optionen, die mit Google-Webfonts nicht zur Verfügung stehen.

hinting
Hints sind die Anker der Beziérkurven, die eine Glyphe in den verschiedenen Schriftgrößen festlegen. Hints bedeuten für den Schriftdesigner viel Arbeit, aber das Ergebnis ist ein Font, der in kleinen (hier besonders!) und großen Schriften eine gute Figur abgibt.
WebOnlyTM
Verhindert, das der Font heruntergeladen und als Desktop-Font installiert wird.
OpenType Features
OpenType-Schriften enthalten Optionen, die aber nicht von allen Browsern unterstützt werden (z.B. Ligaturen). Ohne OT Features wird die Schriftdatei kleiner.
Kerning
Verbessert die Darstellung von bestimmten Zeichenkombinationen, z.B. »Va«. Ohne Kerning wird die Schriftdatei wieder kleiner, aber für die Brotschrift der Seite sollte Kerning immer eingeschlossen werden. Bei einem Logo-Schriftzug kann man testen, ob Kerning die Darstellung verbessert oder nicht.
AWAY

Die umgewandelten Schriftdateien legt man am besten in ein Verzeichnis in der Nähe des CSS-Verzeichnisses, bei einem WordPress-Theme in das Theme-Verzeichnis, bei Drupal unter sites/all/themes in das Template-Verzeichnis des Designs.

Das Zuweisen der Schrift sieht nicht anders aus als bei einem Google-Webfont. Anstelle des schlichten ’serif‘ können gängige Schriften wie in der Zeit vor den Webfonts aufgelistet werden.

body {
    font-family: 'pradaregular', serif;
}

Lade Lade noch ein Weilchen …

Die Ladezeit für Schriften ist keine leichte Kost. Ein gut entwickelter Font bringt schon mal 150 bis 240 KB auf die Wage und muss zu allem Überfluss doppelt angelegt werden, um sowohl IE11 mit WOFF als auch Safari, Chrome, Opera und Firefox mit WOFF2 zu bedienen. Dabei habe ich jetzt noch nicht einmal mitgerechnet, dass für Brotschriften auch noch Kursiv und ein Fettschnitt gefragt sind.

Bis der Webfont geladen ist, wird der Text der Seite nicht angezeigt. Früher haben viele Webseiten darum eine Systemschrift genutzt, und mit Javascript den Webfont eingesetzt, sobald die Schrift geladen war. Heute unterstützen die meisten Browser font-display : swap, so dass diese Javascript-Brücke nicht länger gebraucht wird.

@font-face {
    font-family:'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display:swap;
    src: local('Roboto'), local('Roboto-Regular'), 
    url(roboto-v18-latin-regular.woff2) format('woff2'),
    url(roboto-v18-latin-regular.woff) format('woff');
}
… 
body { 
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

Mit font-display : swap setzt der Browser die erste alternative Schrift ein, die auf dem System des Besuchers installiert ist und tauscht die Systemschrift aus (swap), sobald der Web Font geladen ist. Wenn eine möglichst Systemschrift eingesetzt wird, die dem Webfont möglichst ähnlich ist, ist der Wechsel zur Wunschschrift kaum spürbar, aber der Text ist bereits sichtbar, bevor der Webfont geladen ist.

SITEMAP BLOG