Mit der Google Fonts API seinen WordPress Blog, oder Webseite schöner machen

Mai 27, 2010 34 Von hombertho

Google hat seit kurzem den Dienst „Google font directory“ gestartet. Wenn das kein Grund ist, den neuen Dienst mal auszuprobieren und damit seinen eigenen Blog etwas hübscher zu machen. Jeder der schon mal versucht hat die Standardschriftarten seines Themes zu ändern, weiß wie schwierig das sein kann. Ich bin bis jetzt nur gescheitert und habe es auch irgendwann komplett aufgegeben. Wenn man wie viele WordPress Blogger kein Vollblutadministrator oder Programmierer ist, dann bleibt man häufig einfach bei der Standardschriftart.
Mit dem „Google font directory“ ist jetzt Schluss mit dem Problem und jeder kann mit Hilfe von ein paar kleinen Änderungen im Template, das Schriftbild seines Themes ändern.

Mit der Google Fonts API seinen WordPress Blog, oder Webseite schöner machen

Was muss man dafür tun?

Als erstes geht man auf die Seite von „Google font directory“ und sucht sich einen schönen Font aus. Da der Dienst im Moment noch beta ist hat man die Auswahl von 18 Fonts. Ich finde das reicht auch mal fürs Erste. Gerade wenn die Auswahl größer ist, wird die Wahl nicht gerade leichter 😉

Mit der Google Fonts API seinen WordPress Blog, oder Webseite schöner machen

Hat man seine Wunschschriftart gefunden, klickt man auf die Schrift und man bekommt eine Übersicht des Zeichensatzes und den entsprechenden Code, wie man die Schrift in sein Theme einbindet. Dabei sollte folgender Code am besten im header.php über der style.css stehen (In dem Fall für die Schrift Cantarell):

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

Danach passt man in der style.css entsprechend die Schrift, die man ändern möchte um:

h1 { font-family: 'Cantarell', arial, serif; }

In dem Fall hat man nur die Überschrift geändert 🙂

Das war es dann auch schon. Leichter und einfacher kann man die Schrift wirklich nicht ändern. Wer jetzt noch ein paar Spezial Effekte haben möchte, der kann auch noch der Schrift einen Schatten hinzufügen. Dazu und für viele andere Fragen gibt es eine sehr gute Anleitung, in der alles genau erklärt wird.

Mein Fazit

Die neue Google API gefällt mir sehr gut und funktioniert genial einfach. Wie man hier sieht habe ich schon an meinem Layout geschraubt und die neue Schriftart eingefügt. Ob ich jetzt diese behalte weiß ich noch nicht. Mehr war es wichtig, das die Schrift größer und lesbarer wird. Ich glaube das war bis jetzt mein Hauptproblem. Ich finde die Schrift passt sich auch schon sehr gut ins Layout ein. Dummerweise werden mir bei der Überschrift die Buchstaben abgeschnitten. Ich habe bis jetzt noch keine Idee woran es liegen könnte. Falls da jemand ein Tipp hat, was da falsch eingestellt wurde, kann gerne dazu einen Kommentar hinterlassen 😉

Wer Angst hat, das dadurch die Performance der Seite in mitleidenschaft gezogen wird, kann ich beruhigen. Die Schriften sind nur wenige kb groß und liegen auf den Hochgeschwindigkeitsservern von Google. Wenn die Schriftt nicht mehr verfügbar sein sollte braucht man sich auch keine Gedanken machen. Dann wird automatisch ein Fallback auf Arial gemacht.

Wer sich überhaupt nicht zutraut den Code seines Themes anzufassen, der kann auch das WordPress Plugin nehmen.

Die Schriften sind kostenlos und dürfen frei verwendet werden. Man braucht dazu nicht einmal einen Google Account.

UPDATE 2010-05-28: Die Schrift ist wieder aus meinem Blog verschwunden. Das hat mehrere Gründe. Einerseits, weil sie nicht wirklich gut ankam und zweitens weil die Umlaute beim iPhone nicht anzeigt werden. Damit wird es wohl dann auch nicht beim iPad richtig anzeigt. Schade eigentlich. Ich sehe in den Schriften immer noch ein großes Potential. Es ist halt noch eine beta und in der Endversion wird sicherlich alles besser 😎

Diese Seite enthält affiliate Links. Für dich entstehen keine Mehrkosten, wenn du die verlinkten Produkte bestellt. Du unterstützt damit meine Arbeit und tust mit damit etwas Gutes.