Fonts in Contao Websites einbinden
Webfonts sind eine feine Sache für Optik und Design einer Website. Wir zeigen die Möglichkeiten der Einbindung in Contao anhand der Google Fonts, einer Schrift vom eigenen Server und eines Icon Fonts.
1. Google Web Fonts
So werden Google Web Fonts in Contao eingebunden
In Contao gibts es hierfür mehrere Möglichkeiten. Nach der Auswahl der gewünschten Google Schrift unter https://www.google.com/fonts und der Generierung des Codes zur Einbindung können wir den Codeschnipsel in Contao einfügen. Dazu navigieren wir uns im Contao Backend unter "Layout" und "Themes" zu unserem Layout.
Hier haben wir nun zwei Möglichkeiten. Unter dem Reiter Webfonts können wir direkt den Namen des Fonts einfügen. Haben wir mehrere Schriften werden diese mit einem trennenden Pipe-Zeichen ( | ) einfach angefügt, genau wie im Tooltip des Feldes beschrieben.
Beispiel: Roboto:300|Raleway.
Durch die Verwendung einer oder mehrerer Fonts lässt sich die Optik einer Website gründlich aufpolieren. Das gilt nicht nur für unsere Contao Websites. Seit CSS 2 können Schriften über den Befehl @font-face in Websites auch relativ problemlos eingebunden werden. Theoretisch unterstützen alle modernen Browser diese Möglichkeit.
Zu beachten ist, dass die Fonts von verschiedenen Betriebssystemen ggf. sehr unterschiedlich dargestellt werden. So zeichnet Windows Fonts in der Regel etwas leichter als MacOS. Für die unterschiedlichen Betriebssysteme sollten die Zeichensätze in verschiedenen Formaten vorgehalten werden. Die gängigen Formate sind WOFF (Web Open Font Format) WOFF2, EOT (Embedded-Open-Type), TTF (TrueTypeFormat), SVG, OT (OpenType) oder auch Postscript.
Zum Einbinden von Zeichensätzen gibt es verschiedene Möglichkeiten. Einerseits das direkte Laden vom eigenen Webserver oder indirekt von einem Drittanbieter wie zum Beispiel die Google Web Fonts. Uns bleibt also letztlich die Qual der Wahl und die Beachtung von ein paar Tricks...
Eine weitere Möglichkeit besteht darin den von Google erzeugten Code direkt selbst in den Header einzufügen. Dies geschieht ebenfalls im Layout unter dem Reiter Zusätzliche <head>-Tags. Mehrere Schriften können hier ebenfalls zu einer Code-Zeile verkürzt werden.
Beispiel: <link href='https://fonts.googleapis.com/css?family=Roboto:300|Raleway' rel='stylesheet' type='text/css'>
Diese Zeile ließe sich natürlich auch direkt im <head>-Tag unseres Seitentemplates fe_page einfügen. Diese dritte Möglichkeit hätte den Vorteil, dass wir bei mehreren Layouts, die alle das gleiche Seitentemplate und die gleichen Schriften verwenden, den Code für die Fonts nur einmal angeben müssten.
Egal, für welche Art der Einbindung wir uns entscheiden, anschließend müssen wir unseren Font noch in unserem CSS einbinden.
Beispiel: body {font-family: 'Open Sans', sans-serif; font-weight: 300}
Je mehr Fonts, desto mehr leidet die Performance
Bei aller Einfachheit, sollten wir dennoch beachten, dass die Zeichensätze, die wir in unsere Website einbinden, ebenfalls geladen werden müssen. Je nach Anzahl und Art der Fonts erhöht sich natürlich auch das Transfervolumen und hat entsprechend längere Ladezeiten zur Folge. Eine Beschränkung auf wenige Fonts und die Beachtung der Seitenladezeit sollte daher im Vordergrund stehen.
Übrigens, sollte der eingebundene Font bei unserem Seitenbesucher lokal vorhanden sein, wird er nicht mehr aus dem Web geladen. Dies wird aber in den wenigsten Fällen zutreffen. In jedem Fall sollten wir eine der üblichen Webschriften (Arial, Verdana, Times ...) als Fallback angeben.
2. Fonts vom eigenen Server einbinden
Natürlich lassen sich Schriften nicht nur über einen Drittanbieter in die Website einbinden. Vom eigenen Server können wir die Schriften direkt laden. Dies ist der Fall, wenn wir uns einen Font gekauft haben oder eine Firma eine eigene spezielle Hausschrift besitzt, die eingebunden werden soll.
In diesem Fall binden wir den Font ebenfalls über unser CSS mit dem Befehl @fontface ein. Wichtig werden hier die verschiedenen Formate, damit die Fonts auch überall dargestellt werden. Ebenfalls wichtig ist die korrekte Angabe der Pfade zu den Fonts; hier liegt eine der häufigsten Fehlerquellen.
Beispiel:
@font-face
{
font-family: "Beispielfont";
font-style: normal;
font-weight: normal;
src: url("fonts/dbhea03-web.woff"),
url("fonts/dbhea03-web.ttf"),
url("fonts/dbhea03-web.svg");
}
h1 {font-family: "Beispielfont";}
Wichtig! Auch Zeichensätze unterliegen dem Urheberrecht. Deshalb dürfen wir nicht einfach Fonts aus dem Netz herunterladen und einbinden. Zu prüfen sind vorher immer die jeweiligen Rechte und Pflichten!
3. IconFonts in Contao verwenden
Icons wie z.B. Font-Awesome haben in den letzten Jahren immer mehr an Beliebtheit gewonnen. Kein Wunder, lassen sich die Fonts doch vielfältig einsetzen. Der größte Vorteil gegenüber herkömmlichen Bildern liegt zudem in der verlustfreien Skalierung der Icons Fonts - sowie deren einfache Individualisierung durch Farbe, Schatten oder Größe via CSS.
Auch die Handhabung in Contao ist relativ einfach. Am Beispiel font Font Awesome erläutern wir kurz die Vorgehensweise. Diese ist in Contao erst mal die gleiche wie bei der Verwendung von Google Fonts oder eigenen Schriften.
Wir können den Font via Direktlink über das Seitenlayout einbinden oder die verschiedenen Fonts herunter laden, auf unseren Server uploaden und anschließend einbinden.
Zur direkten Einbindung verwenden wir den Codeschnipsel der von Font Awesome generiert wird und fügen diesen entweder in unserem Layout unter zusätzliche <head>-Tags ein oder über das fe_page Template im <head>.
Beispiel: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
Wenn wir den Font von unserem eigenen Server laden möchten, anstatt den Direktlink zu verwenden, müssen wir das mitgelieferte CSS einbinden. Dies können wir ebenfalls wieder im Layout unter den zusätzlichen <head>-Tags, über das fe_page Template im <head> oder im Layout unter externe Stylesheets. Hier wählen wir einfach das font-awesome.min.css aus.
Beispiel für die Einbindung im <head>:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Um den Font nun zu verwenden, müssen wir die entsprechenden Klassen angeben. Da Font Awesome für Inline-Elemente entworfen, hängen wir unsere Klasse entsprechend an ein <i> oder <span> Tag.
Beispiel für die Verwendung der Klassen:
Der Tag
<i class="fa fa-camera-retro fa-5x"></i>
enthält die Klassen:
.fa zur Initialisierung jedes Icons
.fa-camera-retro für das Kamera Icon
.fa-5x um die Größe fest zu legen
Zu beachten ist, dass die Schriftgrößen, Farben oder Schatten des Elternelementes vererbt werden. Vergrößern wir also die Schriftgröße des umschließenden Elements, wird das Icon ebenfalls größer.
Die Tags können wir in Contao z.B. über ein HTML Element anlegen oder im Quelltext-Editor eines Text-Elementes.
Möchten wir die Icons in Listen - oder anderen Content-Elementen von Contao nutzen, können wir hierzu zum Beispiel das entsprechende Template ändern und darin die gewünschten Tags inklusive deren Klassen ergänzen. Diese Vorgehensweise bietet sich insbesondere dann an, wenn die Inhalte der Seite wartbar bleiben sollen und nicht erwartet werden kann, dass die Tags jedes Mal händisch über den Quelltext eines Textelements augetauscht werden.
Auch bei der Verwendung der Icons Fonts gilt es, die Performance im Blick zu behalten. Denn auch dieser Schriftsatz wirkt sich auf die Ladezeit aus.
Online Website Check
Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.
Hilfe & Support
Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.
Cookie- & Analyse Einstellungen
Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.