Webfont Nutzung

Analog zum Druckbereich kannst du mit Schriftarten Aussagen hervorheben, Emotionen transportieren und passend zur Branche beziehungsweise zum Erscheinungsbild deines Unternehmen die Präsentation der Webseite individualisieren.

Kommerziell oder Open Source?

Neben kommerziellen Dienstleistern wie »Adobe-Fonts« oder »fonts.com» existieren auch kostenfreie Angebote. Bei den meisten kostenpflichtigen Anbietern werden die Webfonts »vermietet« und über eigene Server gehostet. Nur wenige bieten die Webfonts darüber hinaus zum Download an.

Der wohl bekannteste, kostenfreie Anbieter ist Google mit den »Google Fonts». Du findest aber auch Alternativen z. B. auf GitHub. Bei den Open Source Angeboten solltest du darauf achten, dass diese beispielsweise deutsche Sonderzeichen beinhalten. Auch sind hierbei möglicherweise nur wenige oder sogar keine weiteren Schriftschnitte vorhanden.

Dateiformate

Historisch bedingt existieren verschiedene Dateiformate wie ».eot«, ».ttf«, ».woff« oder ».woff2«. Mittlerweile haben sich die Formate ».woff« oder ».woff2« zur Nutzung in aktuellen Browser Versionen etabliert.

Möchtest du ältere Browser unterstützen, kannst du die weiteren Dateiformate zusätzlich einsetzen. Ansonsten wird auf die in deiner CSS-Datei eingetragenen Systemschriften zurückgegriffen.

Contao Integration

Im folgenden verwenden wir den Google Webfont »Vollkorn«.
Hier beispielsweise mit den Schriftschnitten »Bold 700 italic« und »Semi-bold 600«:

"Life is a journey, not a destination."
Ralph Waldo Emerson

Über externes Google Hosting

Über »Google Fonts« kannst du dir die benötigten Schriftschnitte der Schriftart »Vollkorn« auswählen und erhältst im Anschluss eine entsprechende »Embed« Anweisung zwecks Einbindung. Diese könnte z. B. wie folgt aussehen:

<link href="https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,600;1,700&display=swap" rel="stylesheet">

Trage diese Anweisung im Bereich »Experten-Einstellungen -> Zusätzliche <head>-Tags« des Seitenlayouts deines Themes ein. Google liefert hierüber die vom jeweiligen Browser benötigten Informationen und es Bedarf diesbezüglich keiner weiteren Zuwendung deinerseits. Anschließend kannst du die ausgewählten »Schriftart(en) / Schriftschnitt(e)« in deinen CSS-Angaben verwenden:

h1, h2 {
  font-family: 'Vollkorn', serif;
  font-style: italic;
  font-weight: 700;
}

In den Seitenlayouts findest du u. U. noch direkte Eingabemöglichkeiten für die Google Webfonts. Diese Option wird in zukünftigen Contao Versionen nicht mehr zur Verfügung stehen! Es wird daher die beschriebene Vorgehensweise empfohlen.

Mit dem Abruf der Fonts wird ein Kommunikation des Browsers, der die Webseite anzeigt, und dem Google-Server angestossen. Dabei werden auch Daten vom Browser oder die IP des Rechners/Device übermittelt. Diese Übermittlung ist bei der DSGVO oder ePrivacy zu beachten. Zu empfehlen ist der Einbau der Fonts über ein lokale Einbindung.

Lokale Einbindung

Du kannst Webfonts auch »lokal« einbinden. Im Sinne von: Über dein eigenes Hosting.
Hierbei benötigst du die jeweiligen Dateien (s. o.) und stellst diese in einem öffentlich zugänglichen Verzeichnis deiner Contao Installation unterhalb von »files» zur Verfügung.

Im Falle von »Google Fonts« wird dir hierzu zwar eine Download-Option angeboten, allerdings beinhaltet das jeweilige Download- Archiv lediglich Dateien in den Formaten ».ttf«.

Die Webapplikation »Google Webfonts Helper» stellt die Google Webfonts in verschiedenen Dateiformaten zur Verfügung. Darüber hinaus werden, abhängig von deiner Auswahl, die passenden CSS Angaben via »@font-face« mitgeliefert. Diese CSS Angaben müssen deiner eigenen ».css« Datei hinzugefügt werden. Dabei ist es gleichgültig ob du direkt mit CSS-Dateien arbeitest oder ob du diese über Präprozessoren wie »Sass/Less« erstellst.

Du bindest dann die CSS-Datei als externes Stylesheet im Bereich »Experten-Einstellungen -> Stylesheets« des Seitenlayouts deines Themes ein.

Die Pfadangaben url() auf die Webfont-Dateien innerhalb der CSS @font-face Direktive erfolgen relativ zur Position der CSS-Datei. Dies ist abhängig von deiner Verzeichnisstruktur.

Angenommen, du hast die Webfont-Dateien in ein Verzeichnis »files/theme/fonts« kopiert und deine CSS-Datei liegt im Verzeichnis »files/theme/css«, dann wären die korrekten relativen Pfadangaben demnach:

/* vollkorn-600 - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/vollkorn-v12-latin-600.eot');
  src: local(''),
       url('../fonts/vollkorn-v12-latin-600.eot?#iefix') format('embedded-opentype'),
       url('../fonts/vollkorn-v12-latin-600.woff2') format('woff2'),
       url('../fonts/vollkorn-v12-latin-600.woff') format('woff'),
       url('../fonts/vollkorn-v12-latin-600.ttf') format('truetype'),
       url('../fonts/vollkorn-v12-latin-600.svg#Vollkorn') format('svg');
}

Im Seitenlayout kannst du die Option »Skripte zusammenfassen« aktivieren. Hierbei werden alle CSS-Angaben der ausgewählten internen und externen CSS- Dateien in eine einzige, neue Datei zusammengefaßt und von Contao im Verzeichnis »assets/css« abgelegt.

Da sich die neue CSS-Datei nun im Verzeichnis »assets/css« befindet, passt Contao die Pfade zu den Schriften automatisch an.
... url('../../files/theme/fonts/vollkorn-v12-latin-600.woff2') format('woff2'), ....

Die CSS »font-display« Eigenschaft

Eine Webfont-Datei, sofern sich diese nicht bereits im Browser-Cache befindet, muss zunächst vom Browser vollständig geladen werden bevor diese genutzt werden kann. Entsprechend muss der Browser beim Laden der Webseite hinsichtlich der Darstellung reagieren. Das führt zu folgenden Unschönheiten:

  • Solange eine Webfont-Datei nicht komplett vorliegt, versteckt der Browser diese. Nach dem vollständigen Laden wird die Webfont ausgegeben: »Flash Of Invisible Text-Effekt (FOIT)«.

  • Bei einer längeren Ladezeit wird zunächst eine Fallback-Schrift ausgegeben.

Eine Zeit lang wurde versucht hierbei mit clientseitigen JavaScript-Lösungen entgegenzuwirken. Mittlerweile kannst du über die CSS-Eigenschaft font-display zumindest das Browser- Verhalten einheitlich steuern (s. a.: developer.mozilla.org). Eingesetzt wird font-display innerhalb einer CSS @font-face Deklaration und bietet vier verschiedene Werte:
»auto«, »swap«, »fallback« und »optional«.

Der Wert swap wird in den meisten Fällen verwendet und du findest diesen auch in den Google Fonts-Embed- Anweisungen vor (s. o.). Entsprechend kannst du bei einer lokalen Nutzung deine CSS Angaben erweitern:

@font-face {
  font-display: swap;
...
}