23

Für Webdesigner: Google Font Previewer

fontpreviewer

Typografen verzweifeln regelmäßig an der Gestaltung von Websites, denn solange man aus Texten keine Bilder machen möchte (sondern sie als tatsächlichen Text im Browser darstellen möchte), können Designer nur auf diejenigen Schriftarten zugreifen, die auf jedem Rechner, auf jedem Betriebssystem eines jeden Nutzers installiert sind. Um andere, vielleicht ausgefallenere Schriften darstellen zu können, muss man auf serverseitige Software zugreifen und betreffenden Fonts auch dort installieren und bei Aufruf der Site an den Browser „ausliefern“. Alles etwas nervig, alles nicht so leicht.

Ein wenig einfacher wird die ganze Schose mit dem Google Font Previewer, der nicht nur die Vorschau des gewünschten Fonts zeigt und den nötigen CSS-Code liefert, sondern auch einige Open-Source-Schriftsätze anbietet.

[via]

23 Kommentare

  1. 01
    Dirk

    Ich spiele gerade bei einem neu aufzusetzenden WP damit rum und bin momentan recht begeistert.

    Das Layout sieht in verschiedenen Browsern nahezu gleich aus. Selbst der IE8 auf nem WinXP hält sich mit Interpretationen eher zurück.

    Die Auswahl der vorhandenen Fonts ist meiner Meinung nach ausreichend, lässt aber eventuell den einen oder anderen subjektiven Wunsch offen, dafür gibts jedoch nahezu Plattform und Browser übergreifende Gestaltungshoheit.

  2. 02
    Sprayblyck

    Blödsinnige Lösung! Statt sich von Google abhängig zu machen sollte eine Website den Font selbst ausliefern (sofern beim Nutze rnicht schon vorhanden). Alles andere ist dumm!

  3. 03
    Dirk

    @sprayblick

    Gesundheit!

  4. 04

    yay! yanone kaffeesatz auf spreeblick! tolle schrift :)

  5. 05

    Ich bin eigentlich auch ein großer Fan von selbstgehostetem Kram. Meine Schriften suche ich mir für besondere Fälle gerne bei Font Squirrel raus. Dennoch begrüße ich das Google Font Directory und seine neue Funktion sehr: So wird die Methode bekannter gemacht und es kommt ein wenig mehr Abwechslung ins Web.

  6. 06
    LeSmou

    Blöde Frage, aber wie kann man denn serverseitig dem Nutzer/Besucher nen Font (bspw. über WP) „aufdrücken“? Blockieren das nicht dann irgendwelche Programme?

  7. 07
    sn

    @#767242: Da unterschreibe ich.

  8. 08

    der große vorteil solcher dienste ist, dass sie sich um allerlei konvertierungen und browser-inkompatibilitäten kümmern. so versteht z.b. der IE keine opentype-schriften, sondern nur das hauseigene eot (zumindest solange, bis alle woff unterstützen). ipad und iphone hingegen können nur svg-fonts lesen, und garkeine der anderen formate. man müsste sich also als webmaster um das konvertieren und einbetten von mindestens drei bis vier verschiedene font-varianten kümmern, und teils browser-weichen programmieren. dienste wie google oder typekit übernehmen das alles von haus aus; der webmaster bettet nur die eine zeile css-code ein, und der dienst kümmert sich um das bereitstellen des jeweils erforderlichen formats. der profi-dienst http://typekit.com geht noch den einen schritt weiter und konvertiert die schriften auch ins svg-format für’s ipad. somit werden diese dienste zur professionellen ein-klick-lösung für alle, denen dieser ganze browser- und formate-mist auf die eier geht.

    alles über webfonts gibt’s auf ralf herrmanns http://webfonts.info

  9. 09

    @#767245: die schrift-dateien werden als resourcen im quellcode der webseite angegeben und geladen; auf die gleiche art und weise, wie z.b. bilder in der webseite eingebettet sind und geladen und angezeigt werden.

  10. 10
    Dirk

    Hier http://praegnanz.de/essays/webdesignderl sind einige freie Fonts sehr gut erklärt und es wird auch auf die jeweilige Lizensierung eingegangen.

    Nur, weil man einen Font kommerziell nutzen darf, bedeutet das noch lange nicht, dass man die Schrift zum Download anbieten darf.

    Ich kann mir gut vorstellen, dass ein Richter das genauso sehen würde, wenn man eine Schrift auf dem eigenen Webserver vorhält, um sie durch die jeweilige Webgestaltungstechnik (CSS/JavaScript) zum Transfer in die besuchenden Browser zur Verfügung zu stellen. Und dann denke ich dran, dass in Deutschland schon das Einbinden von Fotos gekochter Kartoffeln erfolgreich abgemahnt wurde. Eine Schrift zu entwickeln dauert, glaube ich, länger als 20 Minuten und einen Snapshot mit ner Digitalknipse.

    @LeSmou: Wie der jeweilige Font eingebunden werden kann, findet man zu jeder Schrift in der Google Font Directory unter ‚Get the code‘ alternativ danach noch ‚Advanced techniques‘ klicken. Ansonsten haben die auch noch ne Suchmaschine, wo man danach suchen kann.

  11. 11

    @#767240:
    Nicht dumm, sondern schlau!
    Zum einen spart das Verwenden von Content Delivery Networks (was Google in diesem Fall wohl darstellt) Traffic und im Idealfall Ladezeit beim User (da Font bereits im Cache). Zum anderen hindert dich Google doch in keinster Weise daran die genutzten Fonts auf dem eigenen Space zu hosten. Siehe FAQ-Seite.
    Aber einfach erstmal meckern…

  12. 12
  13. 13
    Frank W

    Coller Editor, aber ich frage mich, warum Google so eine simple Einbindung ermöglicht, mit einfachem CSS-Styling und typekit.com (die Mutter aller Web-Fonts und Google-Partner) die extra-Javascript-Schleife drehen muss?

  14. 14
    Till

    Ich finde den Ansatz auch super, leider gibt es (bei Mir?) kein antialiasing.
    Und ohne Kantenglättung find ich die Schriften genauso hässlich wie Systemschriften. Font Burner ist auch ein nettes plug für WP, da gibts aber grad noch Probleme mit den Umlauten.

    Was gibts denn wohl noch?

  15. 15
    Jan(TM)

    Problem ist leider, das die Schriften im Browser unter Windows Scheiße aussehen. Keine Ahnung woran es liegt.

  16. 16

    Ich liebe die Google Fonts :) Nur leider hat man immer wieder Probleme mit den Umlauten bei manchen Schriften und muss auf eine andere ausweichen :/