Ahadesign

Font Loader Plugin für Joomla!

Details

Veröffentlicht am Mittwoch, 21. Dezember 2011 18:12

Zugriffe: 1436

Unterschiedlichste Schriftarten an unterschiedlichster Stelle einer Joomla Seite, das ist sehr leicht möglich mit dem Google Font Loader Plugin für Joomla.

Google Schriftarten in Joomla!

Das sehr übersichtliche und leicht konfigurierbare Plugin Google Font Loader kann eine Joomlaseite in Windeseile sehr viel interessanter machen.

Wie der Name des Plugins schon verrät, werden Schriftarten aus dem bisher kostenfreien Angebot von Google verwendet.

Die Installation des Plugins ist wie üblich sehr leicht über den Joomla Installer erledigt. Leider ist diese Extension bisher nur für Joomla 1.5 erhältlich, funktioniert aber tadellos.

Nach der Installation muss das Plugin unter Erweiterungen -> Plugins gesucht und aktiviert werden. Neben der Aktivierung können nun auf der rechten Seite diverse Eintragungen vorgenommen werden.

Es gibt hier nur den Bereich Plugin-Parameter, welcher zwei Textfelder enthält. Im ersten Textfeld werden gewünschte Schriftarten ausgeschlossen.

Hier sind nach der Installation schon Systemschriften eingetragen. Die einzelnen Fonts werden hier immer mit einem Komma separiert.

Interessant wird es im Feld darunter. Hier werden die Klassen für die Schriftart definiert, welche dann in jedem beliebigen Textbeitrag zur Anwendung kommen können.

Es sind hier diverse Möglichkeiten denkbar. Soll zb. eine andere Schriftart für die gesamte Joomla-Seite verwendet werden, kann man folgendes eintragen: 

[body]=PT Sans Narrow

Hier wird also zuerst das Body-Tag umschlossen von eckigen Klammern definiert. Auf der PC-Tastatur ist das AltGr + 8 und AltGr + 9. Wer nicht öfter Code schreibt, benutzt das sicher selten bis gar nicht. Deshalb hier der Hinweis dazu.

Gefolgt wird der Tag von einem Gleichheitszeichen und dem Namen der Schriftart. Eine Übersicht über alle möglichen Schriftarten findet man unter http://www.google.com/webfonts#ChoosePlace:select

Auf dieser Seite gibt es oben auf der linken Seite bei "Preview Text" die Möglichkeit, einen eigenen Text, aber auch den Fontname auszuwählen. Fontname ist hier eine gute Wahl.

Gefällt eine Schrift, kann man gleich den angezeigten Namen in das Font Loader Plugin eintragen und muss nicht umständlich die Informationen zum Font suchen.

Mit dieser Methode werden also alle Schriften der gesamten Seite auf ganz schnelle Art verändert. Schriften können aber auch für jeden Tag wie zb. <p>, <h3> usw. gezielt verändert werden.

Auch diese gezielte Änderung ist ganz einfach zu erledigen. Eine gute Möglichkeit ist es, weitere Klassen im Feld für die Class Definitions einzutragen.

Für den Body hat das Plugin die Änderung automatisch erledigt. Werden einzelne Tags hier mit einer Klasse bedacht, muss die jeweilige Klasse dann natürlich auch im Text in der HTML-Ansicht dem jeweiligen Tag zugewiesen werden.

Spielen wir mal gleich mehrere Möglichkeiten durch. Bei den Class Definitions wird zb. folgendes eingetragen:

[body]=PT Sans Narrow
[.allTags]=Playball
[h3.titleFont]=Eater
[p.customFont]=Geostar

Wie man sieht, werden hier die einzelnen Definitionen nicht durch ein Komma getrennt. Das ist wichtig, ansonsten funktioniert es nicht.

Als erstes wurde hier eine Klasse "allTags" definiert. Der Name wurde frei gewählt. Hier kann also jeder eintragen, was er möchte. Für eine Klasse wird immer ein Punkt vorangestellt. Das ist also ganz normales CSS.

Die Klasse "allTags" ist keinem Tag zugewiesen, kann also für alles verwendet werden. Sollen nur Überschriften der dritten Ordnung angesprochen werden, kann "h3" vorangestellt und wieder ein gewünschter Name für die Klasse und eine andere Schriftart gewählt werden.

Für das Absatz-Tag "p" gilt das Gleiche und muss sicher nicht mehr erklärt werden. Nun ist es Zeit, einen Text zu verfassen bzw. einen vorhandenen Beitrag zu modifizieren. Die Vorarbeit ist ja jetzt erledigt.

Im Joomla Backend unter Inhalt -> Beiträge kann nun zb. ein Testbeitrag neu geschrieben werden. Hier empfiehlt sich für einen Test immer ein Lorem Ipsum Generator. Mehr Informationen dazu sind im Beitrag http://www.ahadesign.eu/9-news/955-text-aufspalten-mit-joomla-plugin.html zu finden.

Jetzt muss in die HTML-Ansicht umgeschaltet werden. Das geht ganz schnell über den Button "Editor an/aus" unter dem Textfeld. Ob der Button vorhanden ist, richtet sich aber nach den Einstellungen zum jeweils benutzten Editor.

Diese Einstellungen können normalerweise unter "Erweiterungen -> Plugins -> Name des Editors" oder manchmal auch unter "Komponenten" gemacht werden.

Beim Tiny MCE kann unter Erweiterungen -> Plugins auch die "Erweiterte Ansicht" eingestellt werden. Dann erhält man eine Vielzahl an Icons über dem Textfeld, worunter sich auf jeden Fall auch das Icon "HTML" befindet.

Ein Klick auf dieses Icon führt also ebenso in die Quelltext-Ansicht, nur geht dann noch ein zusätzliches Fenster über dem Editor auf und Änderungen müssen mit dem Button "Aktualisieren" bestätigt werden. 

Normalerweise sieht die Überschrift etwa so aus:

<h3>Ein Test mit dem Google Font Loader Plugin.</h3>

Jetzt kann die vorhin im Plugin definierte Klasse "titleFont" eingetragen werden:

<h3 class="titleFont">Ein Test mit dem Google Font Loader Plugin.</h3>

Nach dem Speichern und aktualisieren der Frontpage greift die Einstellung auch schon. Das Gleiche kann jetzt mit der bereits definierten Klasse "customFont" gemacht werden.

<p class="customFont">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

Es wird hier also lediglich die Klasse zugewiesen, weiter nichts. Somit werden eventuelle Größen- und Farbangaben des verwendeten Templates nicht außer Kraft gesetzt. Aber auch das wäre möglich.

Neben der Schriftart, können auch Größe, Farben, Zeilenhöhe, Abstände und überhaupt alles was mit CSS definierbar ist, verändert werden. Dazu wird dann einfach ein Inline-Style und nicht eine Klasse verwendet. Das könnte dann so aussehen:

<p style="font-family: Sofia; color: rgb(0, 0, 255); font-size: 1.2em;">Hier steht Beispieltext.</p>

Wird der Editor TinyMCE verwendet, sieht es nach dem Speichern so aus:

<p style="font-family: Sofia; color: rgb(0, 0, 255); font-size: 1.2em;" mce_style="font-family:Sofia; color:#00f; font-size: 1.2em;">

Abgesehen von dem Inline-Style greifen die bisher verwendeten Klassen nur bei den Tags <p> und <h3>. Zu Anfang wurde aber ja auch die Klasse .allTags im Plugin definiert.

Diese Klasse kann nun für jedes beliebige Tag verwendet werden. Zb. für eine Überschrift so:

<h3 class="allTags">Hier mit einer Klasse für alle Tags.</h3>

Oder für einen Absatz so:

<p class="allTags">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed  diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  Stet clita kasd gubergren.</p>

Somit hat man eine einzige Klasse für alles, was auch sehr komfortabel sein kann.

Das Plugin eröffnet also viele Möglichkeiten. Alles in einem Beitrag wird in der ganz normalen CSS-Syntax beschrieben. Und auch die Definitionen im Plugin stellen keine Hürde dar.

All die genannten Methoden lassen sich natürlich auch kombinieren. Also zb. generell eine andere Schriftart mit dem Body-Tag für die gesamte Seite und dann für Überschriften und Absätze jeweils wieder was anderes. Das könnte dann so aussehen:

Ein wirklich sehr schönes und sehr brauchbares Plugin, welches obendrein auch noch völlig kostenlos erhältlich ist. Auch eine Registrierung ist für den Download nicht notwendig. Einziger Nachteil, es ist leider nur für Joomla 1.5 zu haben. Aber das kann sich ja in Zukunft noch ändern. 

Hier geht es zum Font Loader Plugin - Download.

• < Zurück
• Weiter >