Analog zum Druckbereich kannst du mit Schriftarten Aussagen hervorheben, Emotionen transportieren und passend zur Branche beziehungsweise zum Erscheinungsbild deines Unternehmen die Präsentation der Website individualisieren.
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.
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.
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 »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 eine Kommunikation zwischen Browser, der die Website 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.
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«.
Webapplikationen wie »Google Webfonts Helper» oder »Web Font Loader«
stellen 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.
Falls du nicht sicher bist, welche der genannten Webapplikationen du benutzen solltest, findest du hier einen Beitrag der die Unterschiede verdeutlicht.
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 zusammengefasst 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'), ....
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;
...
}