CMS Contao 4.11.x
Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Viele dieser Templates habe ich schon in Version 2.11.17 genutzt, allerdings poste ich nur noch die aktuelleren ab Version 4.9.x, die anderen sind einfach zu alt... Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür! Manch Eintrag ist von Version 4.7.x / 4.8.x und mit dem Update auf 4.9.x weggefallen, allerdings lass ich es (noch) drin, da es noch jung ist...
Schriftart einbinden
Es gibt grundsätzlich 2 Möglichkeiten, eine neue Schriftart in Contao einzubetten:
- per Google Fonts
- per CSS mit @font-face
Die Einbindung mit Google ist ganz einfach: Man sucht sich eine Schriftart bei Google Fonts heraus und gibt den Namen der Schriftart in Contao hier ein: Themes --> Seitenlayout --> Google Webfonts.
Jetzt muss man die Schriftart nur noch im CSS mit font-family aufrufen:
CSS font-family
body {
font-family:Ubuntu, Arial, sans-serif;
}Ich persönlich mag es nicht, das die Seite sich etwas von einem anderen Server laden muss, daher nutze ich Methode 2:
Auf Fontsquirrel findet man viele Schriftarten, die man auch frei benutzen darf. Immer daran denken, die Lizenz der Schriftart anzuschauen, nicht jede Schriftart darf auf der Webseite benutzt werden. Nichtbeachtung kann ganz schön teuer werden!
Hat man eine Schriftart gefunden, lädt man sich diese herunter und entpackt das Archiv. Jetzt kann man mithilfe des @font-face Generators die verschiedenen Dateitypen der Schriftart und das CSS anfertigen lassen. Die verschiedenen Dateien werden für die unterschiedlichen Browser benötigt.
In meinem Beispiel speichere ich die 4 Dateien unter files/layout/font ab. Jetzt erstelle ich noch eine font.css, die ich dann in Contao importiere:
CSS font-family
@font-face {
font-family:Ubuntu;
font-weight:normal;
src: url("files/layout/font/ubuntu.eot");
src: url("files/layout/font/ubuntu.eot?#iefix") format("embedded-opentype"),
url("files/layout/font/ubuntu.woff") format("woff"),
url("files/layout/font/ubuntu.ttf") format("truetype"),
url("files/layout/font/ubuntu.svg#ubuntu") format("svg");
font-style: normal;
}Ganz wichtig: Unter Themes --> Seitenlayout --> Stylesheets muss die CSS aktiviert werden.
Wie im ersten Beispiel muss man die Schriftart nur noch im CSS mit font-family aufrufen:
CSS font-family
body {
font-family:Ubuntu, Arial, sans-serif;
}Generell empfiehlt es sich immer, als zweite Schriftart eine webkonforme einzubinden, im Falle die gewählte Schriftart nicht geladen wird. Es sei nochmal ganz deutlich gesagt, das man die entsprechenden Lizenzen der Schriftart berücksichtigt.