Mit der Google Fonts API seinen WordPress Blog, oder Webseite schöner machen
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.
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 
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 
Oh das ist ziemlich cool! Kannte ich noch nicht. Wer weiß, vielleicht greife auch ich darauf zurück ^^
Ich habe es versucht. Irgend wie will er die nicht ändern. Ich wollte nur die Überschrift ändern. Vielleicht kannst du mit helfen!?
@Flügel: Den Link sollte man sich auf jeden Fall mal vormerken. Wenn der Dienst aus dem Beta Stadium ist werden sicherlich auch noch ein paar Fonts mehr dazu kommen.
@Dominik: Die Schrift hast du richtig eingebunden, aber deine Überschrift ist nicht H1, sondern “PostHeader” bzw “Postheader a”. Da musst du die Schriftart ändern. Du brauchst ja nur in deinen Seitenquelltext schauen und da siehst du welche div class gesetzt ist und danach musst du im style.css schauen und abändern.
Ich nutze für meine Überschriften das Plugin TTFTitels dort kann ich dann jede Schriftart nehmen und sie einfügen
@Thomas vielen Dank, jetzt klappt auch mit der Nachbarin
Hab ich vor wenigen Tagen schon von gelesen. Schön mal in echt zu sehen. Nur leider gefällt mir der Schatten überhaupt nicht. Ein Test mit dem IE zeigt, das dies wohl dort auch nicht geht.
Ohne Schatten besser, aber schön das man dies inzwischen (auf den neusten Browsern) ändern kann.
Ja, die Font-API erleichtert die Einbindung neuer Schriften wirklich erheblich.
Meine Versuche dies über den normalen Weg im CSS zu machen waren der reinste Krampf. Die Font-API hilft da wirklich ungemein.
Ich wünschte mir nur eine etwas größere Auswahl an Schriften.
Und eine nette Demonstration hier. Aber der Schatten gefällt mir irgendwie auch nicht so gut. Aber man kann sich dran gewöhnen.
Huch? Keine “Letzter Artikel” Anzeige mehr bei mir? Nanü… Hast Du was geändert und spinnt mein Provider? *g*
Hört sich gut an. Danke für die Info. Werd ich evtl mal ausprobieren.
*hüstel* die Standardschriften die zur Verfügung stehen haben nichts mit dem Apachen (oder sonstigen Webserver) zu tun. Die sind einfach durch die unterschiedlichen Betriebssysteme vorgegeben (“der kleinste gemeinsame Nenner”).
Im Grunde kann man jede beliebige Schrift im CSS angeben, allerdings wird sie nur verwendet wenn sie auf dem System des Betrachters installiert ist oder man verwendet Techniken wie die Google Font API, um die Schrift im Bedarfsfall auszuliefern.
Alternativen sind z.B. Typekit.com (darauf basiert auch die erweiterte Variante (Javascript) von Google) oder wer die Schriften gerne von seinem Server aus anbieten möchte kann z.B. mal bei FontSquirrel.com vorbeischauen (“@font-face Kits”). Allgemeine Infos gibts z.B. im Webfonts Wiki.
Und btw.:
h1 { font-family: ‘Cantarell’, arial, serif; }
Ergibt für mich keinen Sinn, Cantarell und Arial sind serifenlose Schriften. Warum dann als Alternative “serif”? (besser “sans-serif”).
Aber genug gemeckert, ich finds gut (und verwende die Droid ja schon seit einigen Wochen und habe dabei auch die unterschiedlichsten Einbindungsvarianten schon getestet, wie man bei Twitter lesen konnte) das etwas Abwechslung reinkommt, kann allerdings empfehlen das Ganze nicht zu übertreiben (z.b. zuviele unterschiedliche Schriftarten auf einer Seite) und wenn möglich die Seite unter OS X als auch Windows (bzw. mit unterschiedlichen Browsern) zu testen.
das ist echt eine gute Idee von Google. Sonst war man ja immer darauf angewiesen welche Schriftarten die Benutzer auf dem PC/Mac haben.
Ich glaube das schaue ich mir auch mal genauer an.
Oh das ist cool, ich will haben!! Das ist aber richtig toll!
Ich mag keine Bilder-Überschriften über Posts…
@Antje: TFTtitle hatte ich auch schon mal installiert, aber es hat mich nicht so wirklich überzeugt. Einerseits weil es viele Ressourcen braucht und zweitens dann aus der Schrift noch ein Bild macht. Ich habe den Artikel ergänzt. Für die Google Fonts gibt es auch ein Plugin
@Dominik: Sehr schön
@Sebastian: Schade, der Schatten gefällt mir eigentlich sehr gut. Den bekommst du auch mit anderen Schriftarten hin. IE ist da resistent dagegen. Da sind meine Boxen auch eckig und nicht rund und es gibt auch allgemein keinen Schatten.
@Chris: Oh man jetzt gefällt dir der Schatten auch nicht. Ich glaube jetzt muss ich ihn wohl doch noch entfernen
Das dein letzter Artikel nicht angezeigt wird liegt daran, das deine Feedadresse so komisch ist. Da kommt das Plugin nicht damit zurecht. Wenn du wieder ein /feed hast, dann klappt es auch wieder mit dem letzten Artikel
@Zoellner: Gerne doch. Mir hat diese API das Leben unheimlich erleichtert.
@Olli: Vielleicht liegt es daran, dass deswegen es nie mit den fonts geklappt hatte
Danke für den Hinweis, ich habe den Artikel entsprechend geändert. Den Code für die Fonts habe ich aber 1:1 von Google übernommen. Von daher kann ich dazu nichts sagen.
Zu viele Fonts sind unruhig, ausser man macht einen Blog, bei dem jeder Eintrag eine andere Schrift und aussehen hat. Da gibt es ja schon ein paar Beispiele im Netz. Aber das wäre mir dann auch zu wild zusammen gewürfelt.
Kritik ist natürlich auch erlaubt
@Hans-Helge: Ja das ist der Vorteil, das die Schriftarten überall gehen. Wobei ich habe mir sagen lassen, das beim Iphone die Umlaute nicht angezeigt werden. Da bleibt die Frage, wie oft ein Leser über Iphone auf die Seite kommt.
@Arven: Dann nichts wie los. Ich habe den Artikel ergänzt. Es gibt nun auch ein Plugin. Da geht es noch einfacher
@derhenry: Wie meinst du das? Es sind ja keine Bilder, sondern es ist wirklich eine Schrift. Wegen den Schatte muss ich mir noch was überlegen. Der kommt ja allgemein nicht gut an.
Mal was anderes, ganz fernab von der Frage ob noch mehr Google denn nun wirklich sein muss: die alten Schriftarten auf deiner Seite waren besser. (Ja, das kann man einfach so sagen, da man ja über Geschmack bekanntlich nicht streiten kann!
)
@Mike: Ach Mike du auch noch. Hm. Ich habe es gerade auf einem Iphone gesehen, das alle Umlaute nicht angezeigt werden. Ich bin noch am überlegen, was ich mache. Wenn gar keiner der Schrift mag, dann macht es auch keinen Sinn.
Ziemlich coole Aktion.
Meiner Meinung nach sollte man einfach HTML & CSS anpassen, dass man selber Schriften ins Stylesheet einfügen kann, sind auch nicht größer als ein kleines Bild…
Nur wie das mit der Virengefahr ist, weiß ich dabei natürlich nicht.
@Tarik: Ich denke die Virengefahr sollte recht gering sein. Immerhin achtet Google schon darauf. Mittlerweile ist die Schrift ja leider wieder raus geflogen, weil sie bei dem Leser nicht so gut angekommen ist. Daher jetzt wieder Standarfschriftart
Oh, ich muss gestehen, dass mir das Problem mit den Umlauten noch gar nicht aufgefallen war. Jetzt noch den Schatten raus, die Schrift bei den Artikeln und Kommentaren auf die gleiche Größe wie den Text über dieser Kommentarbox („Ich freue mich über euere netten Kommentare“, dabei gleich den Rechtschreibfehler entfernen und „eure“ draus machen) schrumpfen und alles ist wieder gut.
@Mike: Mensch das steht jetzt schon seit über einem halben Jahr dort und es ist noch keinem aufgefallen. Das ist mir aber jetzt peinlich. Also die Schrift habe ich jetzt noch kleiner gemacht, aber den Schatten möchte ich behalten. Mir gefällt der sehr gut. Wenn du die Seite mit einem IE aufrufst, dann wird der Schatten nicht angezeigt
Ist schon viel besser so, finde ich. Und auch eine echt coole Idee den Schatten loszuwerden.
@Mike: Was hast du nur gegen den Schatten. Der ist doch ganz dezent und stört doch nicht.
Aber die API ist nun aber nicht wieder raus oder? Ich sehe weiterhin einen Schatten. Die Schrift ist nun komplett nicht definiert. Daher wird sie bei mir als Times oder so dargestellt. Kannst du sie bitte wieder richtig definieren?
@Hombertho:
Geneva ist keine (Web)Standardschrift, sondern wurde für Apple entwickelt und steht damit standardmässig nur unter OS X zur Verfügung. Eine ähnliche Schrift unter Windows ist die Verdana und als Sicherheit, falls weder noch zur Verfügung stehen – z.B. unter Linux – wäre es noch sinnvoll die “Schriftfamilie” mit anzugeben:
body { font-family: Geneva, Helvetica, Verdana, sans-serif; }
(wenn man für Testzwecke selbst kein Windows zur Hand hat, so kann Browsershots ne Hilfe sein)
Liegt das an meinem Browser oder hast du jetzt eine winzige Serifen-Schrift? Was ich gerade sehe ist für meinen Geschmack definitiv zu klein und serifig, mir fehlt da der Kontrast und co. ;)
Hhhmmm, in meinen Augen es ist technisch schon sehr bedenklich so etwas zu machen. Es gibt keinen Weg mit dem man sicher stellen kann das auch wirklich nur “das” geladen wird. Man liefert nur das aus was man auch selber auf dem Server hat, otimaler Weise. ;) Refenrenzen von anderen Seiten zu benutzten ist im Allgemeinen kein guter Weg und auch ein wenig akzeptierter. Für eine Schriftart erst recht nicht. Auch die läßt sich auf dem Server lagern. Es reicht schon das google analytics überall eingebaut werden muss.
Was interessant ist welch immer neue schauerliche Geschäftsideen von google kommen. Ich habe gehört demnächst soll es ja auch ein google.krankenkassenkarten-view geben. Eigentlich nur logisch da es ja auch ein google.wlan-,google.handy- und google.hairstyle-view gibt.
@Sebastian: Ja die Schrift ist wieder draußen und ich hatte dummerweise einen fehler in der css gemacht. Dieser wurde nun behoben und die Schrift ist wieder in Ordnung. Der Schatten hat nichts mit den Google Fonts zu tun. Das kannst du auch mit den Standard Schriftarten machen.
@Olli: Danke für die Hilfe. Jetzt hatte ich dummerweise schnell bevor ich meine Bloggerpause gemacht hab die Schriftart wieder zurück gestellt und natürlich nicht auf allen Browsern getestet. Da lag dann auch der Teufel im Detail und so ein Mist ist dabei heraus gekommen. Ich habe es jetzt so geändert, wie du es mir geschrieben hattest und auch mit Parallels auf dem Internet Explorer ausprobiert. Jetzt sollte es wieder stimmen. Die Webseite woher ich die Schriftart hatte meinte, das es eine Standardschriftart ist und so bin ich wohl auch drauf rein gefallen
@Roger: Habs geändert, aber du hast es ja schon in meinem aktuellen Post gesehen
@RAETO: Von irgendeiner Seite hätte ich es auch nicht genommen. In der Hinsicht vertraue ich Google schon etwas, dass sie mir da nicht einfach einen anderen Code unterjubeln. Aber wie ich feststellen musste wird die Schrift nicht bei allen Browsern und Endgeräten geladen und somit ist sie für mich auch sinnlos. Ansich finde ich die Idee nicht schlecht, aber noch nicht wirklich ausgereift und daher auch wieder aus meinem Blog verschwunden. Jetzt bin ich wieder bei den normalen Webschriftarten gelandet.
Das mit den Krankenkassenview habe ich bis jetzt noch gar nicht gehört. Das hört sich wirklich sehr abenteuerlich an.
@hombertho
bei den üblichen verdächtigen Browsern ist alles normal zu lesen aber Umlaute sind in dem Beispielen nicht zu sehen. ;)
Es ist ja nicht meine Seite und ich will dir ja auch wirklich nicht auf die Eier gehen, aber was hältst du jetzt noch von ein wenig (!) mehr Zeilenabstand?
Ich glaube, dass das den Lesekomfort deutlich erhöhen würde.
PS: Mut zur Lücke!
@raeto:
Es gibt durchaus Dinge die dafür sprechen, Schriften von einem CDN aus zu laden (und zwar die allgmeinen, die für ein CDN sprechen… gleiches gilt damit auch für die Google Font API). Bzgl. der Sicherheit – schwieriges Thema – muss schlussendlich jeder selbst wissen, wem er vertraut und wem nicht (ob Google (und Co) oder dem kleinen Webseitenbetreiber (der unbedingt seinen eigenen Server betreiben wollte, aber keine Ahnung von hatte)).
@Thomas (bzgl Mike/Zeilenabstand):
Eine recht einfache (aber fast immer brauchbare) Fautsregel für den Zeilenabstand (bzw. Zeilenhöhe): Einfach den Text markieren und darauf achten das mind. eine minimale Lücke zwischen den Zeilen besteht.
@Olli: Noch nie gehört, aber klingt gut. Werde ich bei Gelegenheit mal ausprobieren!
Also Thomas, wir sind jetzt schon mindestens 2…
@RAETO: Das mit den Umlauten ist leider auch ein Problem.
@Mike: Okay dein Wunsch ist mir Befehlt. Ich habe den Zeilenabstand jetzt um den Faktor 1,5 erhöht. Ich hoffe du bist nun zufrieden.
@Olli: Ich habe den Zeilenabstand nun auf line-height:150% erhöht. Nun sollte alles besser zu lesen sein.
Zufrieden? Nein, du bist mein Held!
So sind die Artikel doch schon viel schöner zu lesen.
@Mike: Für meine Leser tue ich doch fast alles