Google serviert Gratis-Webfonts
Fast wöchentlich eröffnen nun neue Online-Services für Webdesigner, die sich nicht selber um das (manchmal etwas zickige) Einbinden von Webfonts auf Websites kümmern wollen. Mit dem technischen Know-How von Typekit (hier gibt es eine offizielle Kollaboration), aber natürlich kostenlos und auf wenige, dafür ausreichend qualitative Open-Source-Schriften beschränkt, so sieht der Google-Weg aus!
Die Einbindung der Fonts geschieht komplett ohne JavaScript – es reicht die Einbindung eines externen Stylesheets vom Google-Code-Server, den Rest erledigt Google irgendwie automatisch. Saubere Sache. Im Hightraffic-Einsatz ist die neue Technik schon beim Smashing Magazin (am beispiel der Droid) zu beobachten.
Auch wenn man die bei Google verfügbaren Schriften alle herunterladen und auf dem eigenen Server hosten kann – es zeichnet sich damit immer mehr ab, dass Webfonts eine Sache sind, deren Hosting man gerne einem dedizierten Service überlässt. Es erspart einem den Stress mit diversen Formaten und Browsererkennung usw. Für eine Riesenauswahl an kommerziellen Schriften empfehle ich bisher uneingeschränkt Typekit, auch wenn sicher derzeit noch nicht alles perfekt läuft – die Jungs kümmern sich aber extrem engagiert um alle Probleme und Zukunfts-Ideen rund um die Webfont-Technik.
Ein Praxis-Problem ist jedoch nach wie vor vorhanden: Im Entwurfsprozess im Photoshop kann ich freilich nicht auf Webfonts zugreifen, sondern benötige die »echten« Schriftdateien. Bei Googles Open-Source-Auswahl kein Thema. Bei den allermeisten Typekit-Schriften jedoch nur mit Hacker-Methoden möglich.
… ach ja, das Vorschau-Tool der Google-Fonts ist ziemlich cool!
Eric Eggert am 20. Mai 2010 #
Da man idR. nicht nur die Web-Version der Schriftart benötigt ist das Photoshop-Problem ja ein vernachlässigbares. Wenn man keine laufenden Kosten haben möchte bietet sich zudem das Angebot von FontSpring.com an, bei dem man Schriftarten und Web-Lizenzen einkaufen kann.
david am 20. Mai 2010 #
Tja, Gerrit: Make Your Mockup in Markup! ;)
Michael van Laar am 20. Mai 2010 #
Um unnötige HTTP-Requests zu vermeiden würde ich persönlich den Inhalt der von Google angegebenen CSS-Datei lieber direkt in mein eigenes Stylesheet einbinden.
Trotzdem bin ich auch bei den von Google angebotenen Schriften noch nicht glücklich mit dem Aussehen unter Windows. Aber wenigstens gibt es ja ein paar Webfonts, die – per @font-face eingebunden – auch unter Windows gut aussehen.
Monster am 20. Mai 2010 #
@Michael: Das CSS von Google ist ja gerade der Trick — es ist dynamisch und entscheidet browserabhängig das verwendete Format.
Wenn du diese Logik selbst nachbilden willst, brauchst du ja nur die entsprechenden URLs zu extrahieren und ins eigene Stylesheet einbinden.
Martin am 20. Mai 2010 #
Mein Lieblings-Free-Font (Linux Libertine) fehlt (noch?)…
Peter Kröner am 20. Mai 2010 #
Die Libertine ist so groß, die will man doch als speedbewusster Nerd gar nicht im Web haben. Oder? Da lohnt sich ja fast schon ein Torrent für.
Claude am 21. Mai 2010 #
Wie kann man die herunterladen? Oder wo, z. B. die Molengo?
Martin am 21. Mai 2010 #
Google 150kb
Fontsquirrel 60kb
Selfhosting 30kb (Dank Subsetting)
Jemand eine Erklärung wie Google es schafft die Datei so aufzublasen?
Martin am 21. Mai 2010 #
Sorry: Mit Datei meinte ich die Droid Sans (.ttf)
Michael van Laar am 21. Mai 2010 #
@Martin: Vielleicht lassen die die Kerning-Informationen drin? Fontsquirrel empfiehlt ja, selbige zu entfernen, weil die meisten Browser damit ohnehin nichts anfangen können. Ist aber nur eine Vermutung.
Martin am 21. Mai 2010 #
Ach ja. Hab mit die optimierte Version der Droid angeschaut. Originalgröße ist 150kb.
Joachim am 22. Mai 2010 #
Ist es nicht so, dass die Google-Fonts, wenn diese direkt über den Google-Code-Server geladen werden, diese lokal gecached und domainübergreifend genutzt werden können. Somit ist die Größe doch zweitrangig, da somit das häufige Laden der Schriften minimiert wird, je verbreiteter die Fonts sind.
Zusätzlich kann der Link auf den Google-Font auch in das Stylesheet auslagert werden und über die @import-Funktion die URL des Fonts eingebunden werden. Somit sind die Google-Fonts analog der anderen Stylesheets in der CSS-Datei gekapselt.
Beispiel:
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
Weitere Beispiele der @import-Aufrufe im Google Font Directory.
Markus am 24. Mai 2010 #
Das ist wieder ein Beispiel für die google-Kulter. Wahrscheinlich brauchte irgendein google-Ingenieur eigene Webfonts für ein Projekt und google stellt nun seine Lösung einfach allen bereit. Bei aller Datenkrakenkritik muss man google einfach nur lieben.
Andree am 25. Mai 2010 #
Wahrscheinlich landen beim Einbinden des Stylesheets die Schuhgröße, die Lieblingsspeise und die Sozialversicherungsnummer des Surfers in den googleschen Datenbanken…
;)
mot am 25. Mai 2010 #
Wer schlägt das Google CDN und muss sich nicht mit Problemen im Rendering rumschlagen?
Du selber: einfach die Fonts installieren: webfonts.zip / Info
Weitere Fonts auf Anfrage.
Nils Allwardt am 4. Januar 2011 #
Hi. Ich finde den Google Service ziemlich cool. Habe aber gerade einen üblen Bug entdeckt, den ich der Webdesigner-Gemeinde nicht vorenthalten will (es hat lange gedauert den Fehler zu lokalisieren).
Mein Website-Projekt (Wordpress 3.0.4, angepasstest twentyten Theme, HTML 5, CSS 3, diverse Plugins, Google Font »Molengo«) verursachte mit einigen Seiten, dass der Internet Explorer 8 wegen „Darstellungsproblemen“ in den Kompatibilitätsmodus umschaltete. Wenn man das per Meta-Tag unterband, wurde nur noch eine weiße Seite angezeigt. Alle anderen Browser hatten keine Probleme und der Quellcode ist auch valide.
Der Fehler: Die Molengo beinhaltet kein großes „Ä“. Immer, wenn im Text dieser Buchstabe auftauchte, kam der oben beschriebene Fehler.
Hab jetzt eine andere Schrift genommen und der Fehler ist weg. Hoffe, jemand mit dem gleichen Problem findet durch diesen Beitrag schneller eine Lösung.
Gruß aus Hannover