Webfonts in Joomla

In Joomla ist das Einbinden der google Webfonts nicht in den Kern integriert wie bei {{news_open::85}}Contao.

Es gibt z.b. die Erweiterung web fonts, aber da diese nur für Joomla 2.5 verfügbar ist und in absehbarer Zeit offenbar nicht für Joomla 3.x angepasst werden soll, kommt diese Erweiterung im Moment nicht in Frage. Es gibt auch kostenpflichtige Extensions. Die Ausgaben kann man sich aber meiner Meinung nach sparen, da es auch in Joomla nicht schwer ist, mit google fonts zu arbeiten. Man muss sozusagen den herkömmlichen Weg wählen und sollte geringfüge CSS-Kenntnisse besitzen.

Auf der Seite von google Fonts wählt man die gewünschte Schrift aus, was bei inzwischen über 600 Schriften schon schwer genug ist. Es gibt aber ganz brauchbare Filter (auf der linken Seite) und außerdem kann man bei Preview Text seinen eigenen Text eingeben, sehr praktisch, um zu sehen, welche Schrift gut zum Projekt passt. Man kann die favorisierten Schriften auch erst einmal zur Collection (Add to Collection) hinzufügen und dann später auswählen.

Hat man eine passende Schrift gefunden, klickt man auf Quick-use und wählt die benötigten Stile aus. Normal, evtl. bold oder semi-bold. Anschließend kann man bei einigen Fonts die Zeichenkodierung auswählen (Character set), im Normalfall wählt man Latin. Das erhöht die Performance der Webseite, da nicht alle Kodierungen geladen werden müssen.

Unter Punkt 3 steht der Quellcode, den man in sdie Hauptdatei kopieren muss. Also: diese Zeile kopieren, im Joomlabackend unter Erweiterungen --> Templates den Reiter Templates anklicken und das verwendete Frontendtemplate suchen und auf Details und Dateien klicken. Bei Jommla 2.5 stehen die HTML-Dateien links, die CSS-Dateien rechts, bei Joomla 3.x ist das alles auf der linken Seite als Verzeichnisbaum geordnet. Hauptseite bearbeiten (Joomla 2.5) bzw. die index.php anklicken (Joomla 3.x). Dann am besten das Ende des Kopfbereichs suchen: </head>. Vor diesen tag die kopierte Zeile einfügen. Speichern und Schließen.

Mehrere Schriften können übrigens einfach als Aufzählung in diesen Link eingefügt werden, getrennt durch den Längsstrich ohne Leerzeichen (Roboto|Droid+Sans|Raleway:400,500). Schriften mit mehreren Namensbestandteilen werden mit + (ohne Leerezeichen) dargestellt (Open+Sans).

Anschließend muss man noch die Schrift in das entsprechende Style Sheet einfügen. Dazu bei google fonts unter 4. gucken, wie die Schrift zitiert wird. Dann im Joomlabackend das Stylesheet öffnen (in Jomomla 2.5 rechts, in Joomla 3.x links im Verzeichnisbaum unter CSS). U.U. muss man das richtige Style Sheet mit der gewünschten Stilanweisung etwas suchen, das ist abhängig vom verwendeten Template. I. A. ist es layout.css oder main.css o.ä. Mithilfe der Suchfunktion des Browsers kann man dann auc ganz gut die entsprechende Stilanweisung finden, also font-family.

Die Schrift oder Schriften entsprechend der Anweisung bei google Fonts eintragen, speichern und im Frontend sollte die neue Schrift zu sehen sein (evtl. noch Cache löschen).