5202

ein Blog über technische Fragen zu Blogger

Blogger: Eigene Schriften verwenden

von
Ich habe die letzten Tage ein paar seltsame Tutorials zum Thema 'Eigene Schriften in Blogger' gefunden - deshalb einige grundsätzliche Bemerkungen zum Thema, vielleicht ist es für den ein oder anderen hilfreich.

Websichere Schriften
Grundlegend: Zur Darstellung einer bestimmten Schrift muss eurer Computer diese Schrift - oder 'Font' - auch installiert haben. Sonst seht nur _ihr_ diese Schrift und sonst niemand. Jedes Betriebssystem hat von Haus aus bestimmte Schriften dabei - Apple Computer haben etwa viele klassische und schönen Schriften wie 'Hoefler Text' in ihren Bibliotheken. Ihr könnt diese Schrift verwenden, klar, aber das werden nur Apple Besitzer auch sehen können. Windows hat wiederum andere Fonts, Linux wieder andere und so weiter. Die einzige 'Schnittstelle', d.h. die einzige Schrift die wirklich alle Computer gleich haben, sind die so genannte 'Websichere Schriften'. Das sind: Arial, Courier, Georgia, Impact, 'Times New Roman', Trebuchet und Verdana. Diese Schriften könnt ihr uneingeschränkt verwenden, jeder Computer wird sie darstellen können.
Schreibweise
Ein Wort zur Schreibweise: Wie ihr an 'Times New Roman' sehen könnt, gibt es Fonts, die aus mehreren Begriffe bestehen. In CSS müssen diese Begriffe innerhalb zweier Hochkommas stehen ' ' - gewöhnt es euch deshalb am besten gleich an, Schriften aus mehreren Begriffen so zu schreiben.

A) Eigene Schrift verwenden: Fallback definieren

Die 'Websicheren Schriften' sind auf Dauer natürlich langweilig, wie könnt ihr nun eigene Schriften verwenden? Die erste Möglichkeit ist eine beliebige Schrift zu nehmen, die euch gefällt und für alle, die diese Schrift nicht besitzen ein 'Fallback' zu definieren, d.h. einer Anweisung für den Computer was er tun soll, wenn er die von euch gewünschte Schriftart nicht in seinen Bibliotheken findet.
Demo
Als Beispiel nehme ich eine Schrift, die bereits erwähnte 'Hoefler Text'.
Dies ist 'Hoefler Text'
Auf einem Apple sieht das ganze so aus:
Falls ihr keinen Apple habt, seht ihr oben eine unterschiedliche Schrift zum dem .png unten, nämlich eure Standardschrift von eurem Computer.
CSS Style für das Beispiel
<span style="font-family: 'Hoefler Text'; font-size: 20px">
Dies ist 'Hoefler Text'</span>
Die Schrift-Art font-family: 'Hoefler Text'; ist ganz simpel als Style-Anweisung definiert.
Fallback
Statt einer einzigen Schriftart könnt ihr nun auch mehrere definieren. Der Computer wird sie von links nach rechts abarbeiten, d.h. er wird zuerst die linke Schrift nehmen, wenn er die nicht in seiner Bibliothek findet, wird er die Schrift rechts daneben nehmen, wenn er die nicht findet wird er die nächste rechts davon nehmen und so weiter. Ihr definiert also eine Reihe von ähnlichen Schriften für die verschiedenen Systeme, bei der als letztes immer ein 'Websicherer Font' stehen sollte.
Demo
Hier sind nun eine ganze Reihe von Schriften definiert:
Dies ist 'Hoefler Text'
Auf einem Apple sollte das identisch, auf anderen Systemen unterschiedlich zu oben ausschauen.
CSS Style
<span style="font-family: 
'Hoefler Text', Constantia, Palatino, 'Palatino Linotype',
'Book Antiqua', Georgia, serif; font-size: 20px">
Dies ist 'Hoefler Text'</span>
Der Computer wird also zunächst in seiner Bibliothek nach dem Font 'Hoefler Text' suchen, findet er ihn nicht nach Constantia, dann nach Palatino und so weiter, bis er am Ende - wenn überhaupt kein 'Treffer' in seiner Bibliothek ist - die Anweisung "serif" findet, d.h. irgendeine Schrift mit Serifen ausführt.
Diskussion
Diese Methode funktioniert, erzeugt aber auf jedem Betriebssystem ein etwas anderes Aussehen von eurem Blog. Außerdem müsst ihr euch sehr gut mit Schriften auskennen und wissen, welche Fonts auf welchem OS ähnlich sind. Deswegen gibt es seit einiger Zeit einen anderen Ansatz, nämlich 'Web-Fonts', d.h. die gewünschte Schrift wird beim Aufrufen des Blogs mit Javascript aus dem Internet geladen. Google hat eine Sammlung von zwischenzeitlich über 400 'freien' Fonts in's Netz gestellt, die ihr benützen könnt. Falls ihr eine diese Schriften in Blogger verwenden wollt, müsst ihr den Link von Google in einem einzigen Punkt anpassen, dazu später mehr.

B) Eigene Schrift verwenden: Google Web-Fonts

Wie ihr Google Web-Fonts verwenden könnt, zeige ich euch an dem Beispiel der Schrift 'Wire One'.
Demo: 'Wire One'
Dies ist 'Wire One'
Quick Use
Ihr sucht bei Google Web-Fonts zunächst die Schrift 'Wire One' - auf der rechten Seite findet ihr den Punkt "Quick Use".

Dort findet ihr nun einen Link zum einbauen in eurem Blog:
Das ist der Link für den Font, so wie er von Blogger angegeben wird:
<link href='http://fonts.googleapis.com/css?family=Wire One' rel='stylesheet' 
type='text/css'>
HTML - XML
Wichtig: Dieser Link ist HTML und wird in Blogger _nicht_ funktionieren. Die Blogger-Layouts sind in XML geschrieben, anderer Dialekt! Damit das in Blogger klappt, müsst ihr am Ende noch ein Backslash "/" anhängen.
<link href='http://fonts.googleapis.com/css?family=Wire One' rel='stylesheet' 
type='text/css' />
Einbau
Ihr geht nun zu eurem Blog und sucht im HTML den <head> Tag (der ist ziemlich weit oben).
Direkt _unter_ dem <head> Tag setzt ihr den XML-Link ein:
<link href='http://fonts.googleapis.com/css?family=Wire One' rel='stylesheet' 
type='text/css' />
Noch auf 'speichern' gehen und fertig! Ihr habt nun ein Script im Blog, das die Schrift 'Wire One' für jeden Besucher lädt. Ihr benützt die Schrift wie jede andere auch:
<span style="font-family: 'Wire One'; font-size: 40px">Dies ist 'Wire One'</span>

Fragen?

Die Verwendung von eigenen Schriften im Blog ist ein weites Feld und ich werde da sicher noch mehr dazu schreiben - jetzt lasse ich das mal an dem Punkt stehen. Wenn Fragen dazu auftauchen, fragt unter Kommentare nach.