Schriften im Joomla!-Template mit Google Font und Typekit
Es gibt websichere Schriften wie Verdana, Arial oder Times, die der Webdesigner einsetzen kann. Bei diesen Schriften bleibt das Schriftbild auf den unterschiedlichen Systemen und Browsern nahezu identisch. Doch was, wenn du andere Schriften verwenden möchtest? Mit Google Font und Typekit ist das kein Problem.
Die schnelle Variante
Der schnelle Weg führt über die Google Font Directory. Dort hast du die Wahl zwischen einigen sehr ansehnlichen Schrifttypen. Klickst du eine Schrift an, bekommst du deren Vorschau in verschiedenen Größen. Neben dem Zeichensatz und anderen Informationen steht unter Get the code ein HTML-Einzeiler zum Einbetten in deine eigene Website bereit.
<link href='http://fonts.googleapis.com/css?family=Crimson+Text&subset=latin' rel='stylesheet' type='text/css'>
Diesen Einzeiler kopierst du in den <head>-Bereich der index.php deines Templates.
templates/DEINTEMPLATE/index.php
Der Link generiert die nötigen CSS-Spezifikationen, damit der Besucher deiner Seite die geladene Schrift in seinem Browser verwenden kann. Jetzt kannst du per CSS die Schrift nutzen, z. B.:
h1 { font-family: 'Crimson Text', times, serif; }
Die Defintion gehört in das Cascading Stylesheet deines Templates, z. B. in die template.css.
templates/DEINTEMPLATE/css/template.css
Um die Ladezeit in Grenzen zu halten (Crimson Text z. B. nimmt ca. 47 KB in Anspruch), solltest du dich auf einzwei Schriften beschränken.
Google Font API
Die schnelle Variante hat einen Nachteil: Während der Ladezeit der Schrift wird die Fallback-Schrift angezeigt. Im obigen Beispiel wäre das die Schrift Times. Erst wenn die „neue“ Schrift geladen ist, wird auf sie zurückgegriffen. Das verursacht einen unschönen Flash-Effekt und sieht alles andere als gut aus. Doch dafür gibt's eine Lösung.
Der profesionelle Weg führt über die Google Font API, die Schnittstelle von Google Font. Mit dem WebFont Loader kann die Schrift per Javascript geladen werden. Hast du eine Schrift ausgewählt, so wie im obigen Beispiel Crimson Text, dann steht sie dir unter Get the code > Advanced techniques zum Einbetten per Javascript bereit.
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Crimson Text' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Diesen Code packst du in den <head>-Bereich der index.php Deines Templates. Das Laden mittels Javascript bringt den Vorteil, dass du im Cascading Stylesheet die Schrift und das Laden derselbigen besser kontrollieren kannst.
.wf-loading h1 { /* greift, solange die Schrift lädt */
display:none;
}
.wf-inactive h1 { /* greift, wenn das Laden fehlgeschlagen ist */
display:block;
font-family: times, serif;
}
.wf-active h1 { /* greift, wenn die Schrift geladen ist */
display:block;
font-family: 'Crimson Text', times, serif;
}
Wenn das Laden der Schrift gestartet ist, wird veranlasst, dass die Klasse wf-loading dem <html>-Tag zugeordnet wird. Zu diesem Zeitpunkt greifen alle CSS-Definitionen dieser Klasse. Ist die Schrift vollständig geladen, wird die Klasse wf-inactive zurückgenommen und die Klasse wf-active dem <html>-Tag zugewiesen.
Wichtig: Wird die Schrift nicht geladen, greift auf jeden Fall die wf-inactive Klasse.
So bekommst du ein Tool an die Hand, um dem unschönen Flash-Effekt entgegenzuwirken.
Typekit
Der WebFont Loader ist eine Zusammenarbeit von Google und Typekit. Typekit bietet gegen Bezahlung weit aus mehr und professionellere Schriften in ihrer Bibliothek als Google an. Der Dienst kann kostenfrei getestet werden. Die Technik zum Einbinden der Schriften über Typekit bleibt wie gehabt (siehe oben) und braucht nur an einer Stelle nachkonfiguriert werden.
Laden der Schriften über Google Font
WebFontConfig = {
google: { families: [ 'Crimson Text' ] }
}
Laden der Schriften über Typekit
WebFontConfig = {
typekit: { id: 'myKitId' }
}
Laden aus beiden Diensten
WebFontConfig = {
google: { families: [ 'Crimson Text' ] },
typekit: { id: 'myKitId' }
}
Den richtigen Schrifttyp bei Typekit zu finden kann sehr zeitintensiv sein. The Great Typekit Table hilft dabei, sich ein wenig in der Bibliothek von Typekit zurecht zu finden. In der Tabelle werden alle Schriften aufgelistet, mit denen Du groß und klein, fett, kursiv und fett kursiv schreiben kannst. Zudem sind alle Hand- und Skriptschriften, sowie Monospace aussen vor gelassen.
Fazit
Um andere Schriften auf Deiner Seite einzubinden, bietet sich der WebFont Loader von Google und Typekit bestens an. Durch die unterschiedlichen Schriftypen können Websites individueller gestaltet werden. Eingeschaltetes Javascript im Browser des Besuchers ist allerdings Pflicht. Google bietet einige Schriften frei an. Die weitaus besseren Schriften findet man bei Typekit, dann aber gegen Bezahlung.
Über den Autor
Alexander Schmidt ist Webentwickler, Buchautor und Dozent. Er lebt mit seiner Familie in Bad Nauheim / Hessen. Seit 2005 realisiert er als Einzelunternehmer Websites mit Joomla und hat sich sich auf hochwertige Template-Umsetzungen spezialisiert. Er ist Fachautor der Zeitschrift t3n.
Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann. | EDVAS Webdesign |
Kommentare (0)