@font-face – Fonts in Webseiten einbetten

Schriftdateien: Externe Ressourcen

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.

Google-Fonts einbetten und Datenschutz

Bei den Google Webfonts kümmert sich Google selber um die Liste der Alternativen – das machte das Einbinden von Schriften via Google Webfonts so einfach. Aber der direkte Einsatz von Google-Fonts ist nicht datenschutzkonfrom, denn mit jedem Aufruf der Seite wandert auch die IP des Besuchers zu Google.

Google Fonts vom eigenen Webspace

Google-Fonts können auch bei Google heruntergeladen und dann von einem Verzeichnis des eigenen Webspace aus bedient werden. Nur so können wir die Webfonts nutzen:

Alternativ gibt es die Seite Google Font Helper, die auch das CSS für das Einbinden der Fonts bereitstellt.

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.

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

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.

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.

WebOnly^TM

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.

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;
}

font-display:swap oder 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.

Externe Quellen

• LG München: 3 O 17493/20 vom 20.01.2022: Einsatz von Google-Fonts nicht vereinbar mit DSVGO
• Should I Use JavaScript to Load My Web Fonts?