CMS Contao 2.11.1x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. 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!

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:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
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:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
@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:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
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.

Zurück