Die kostenlosen Webfonts der Google Font API nutzen

Wenn du auch immer auf der Suche nach schönen Schriften bist, die du für deine Webdesigns verwenden kannst, hast du bestimmt schon von den Open-Source Webfonts von Google gehört. Über die Google Font API kannst du derzeit bereits fast 30 Schriften für deine Webseiten nutzen. Toll ist, dass du die Schriften nicht mehr kompliziert einbinden oder umwandeln musst, sondern sie werden direkt von Google aufgerufen. Wie das funktioniert, und worauf du bei der Verwendung der Google Webfonts achten solltest, habe ich hier kurz zusammen gefasst.

1. Die Google Fonts auf deiner Webseite nutzen

Eine Übersicht aller derzeit zur Verfügung stehenden Schriften kannst du dir im Google Font Directory anschauen.

Goole Font API nutzen
Im Font Directory findest du alle Google Webfonts in der Übersicht.

Die Verwendung der Google Fonts hat den großen Vorteil, dass du deine Schriften nicht mehr aufwendig umwandeln und einbinden musst, wie das z.B. bei der @font-face Methode nötig ist. Außerdem musst du die Schriften auch nicht mehr auf deinem eigenen Server laden, sondern sie werden direkt von Google aufgerufen. In deinem Stylesheet bestimmst du dann die Schriften wie gewohnt, z.B. mit font-family: ‚Droid Sans‘, serif;

Für das Einbetten deiner Schriften musst du lediglich eine Code-Zeile als erstes Element unterhalb des head-tags deiner Webseite, oder über @import in deinem eigenen Stylesheet aufrufen. Den benötigen Code kannst du dir am einfachsten über die Google Font Directory erstellen.

1.1. Code im head-tag

Dazu klickst du deine gewünschte Schrift im Google Font Directory an, und wählst im Tab-Menü »Get the Code« (neben dem Code zum Einbetten findest du hier auch noch jede Menge nützliche Infos zur Schrift). Wichtig ist, hier gleich die Varianten deiner Schrift zu bestimmen, wenn du z.B. auch Bold- oder Italic-Styles auf deiner Webseite benötigst.

Goole Font API nutzen
Alle Infos inklusive dem Code für die DroidSans in der Google Font Directory.

Den Code-Schnipsel fügst du dann in die erste Zeile deines head-tags ein. Für Die Verwendung von DroidSans Regular und Bold ist der Code zum Beispiel:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>

Möchtest du auf einer Webseite verschiedene Schriften der Google Font API nutzen, kannst du diese gemeinsam aufrufen. Jeden Font-Name trennst du lediglich mit einem Trennstrich |. Für die Verwendung der DroidSans und der DroidSerif nutzt du also den Code-Schnipsel:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,bold,bolditalic&subset=latin' rel='stylesheet' type='text/css'> 

1.2. Code mit @import in deinem Stylesheet

Möchtest du deine Fonts lieber mit @import in deinem Stylesheet aufrufen, kannst du den Code hierfür unter dem Punkt »Advanced Techniques« in der Code-Beschreibung finden. Für die DroidSans ist dieser z.B.:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);

Die @import-Methode solltest du allerdings nur in deinem Haupt-Stylesheet nutzen, da es sonst Probleme mit der Schriftansicht im Internet Explorer gibt.

1.3. Den WebFont Loader nutzen

Als weitere Möglichkeit kannst du deine Schriften auch mit Hilfe von JavaScript über den WebFont Loader einbetten. Den Code und eine ausführliche Beschreibung zu dieser Option findest du ebenfalls unter »Advanced Techniques«.

Außerdem kannst du dir hier auch deine Webfont im .ttf Format auf deinen Computer herunterladen, um dein Webdesign in einem Grafikprogramm oder in Photoshop anzulegen.

2. Google-Schriften im Font Previewer testen

Eine weitere praktische Option zum Testen der Google Webfonts in verschiedenen Browsern ist der Font Previewer.

Goole Font API nutzen

Du kannst jede der Google Webfonts auswählen, und einen eigenen Text im Textfeld eingeben. Über die Schrift-Einstellungen links im Menü kannst du dann Varianten der Schrift testen, und dir den passenden CSS-Code für dein Stylesheet zusammen stellen.

3. Weitere Tipps

Möchtest du die Verwaltung deiner Google Fonts im WordPress Admin-Bereich vornehmen, kannst du auch das WordPress Plugin »WP Google Fonts« verwenden. So kannst du deine Google Fonts schnell austauschen oder anpassen.

Auf dem Google Web Font Blog findest du im Artikel »Optimizing the Use of the Google Font API« jede Menge hilfreiche Tipps für die Nutzung der Google Fonts.

Eine ausführliche Beschreibung mit Beispielen und Tipps kannst du auch im Beitrag »A Guide to Google Font API« bei Six Revisions nachlesen.

Wie gefällt dir die Option, deine Schriften über die Google Font API aufzurufen? Hast du bereits Erfahrungen mit der Verwendung der Google Fonts gemacht? Über dein Feedback und weitere Tipps zur Nutzung freue ich mich sehr!

31 Kommentare

  1. Hallo Ellen

    Meine Erfahrungen mit Font-Einbettungen im Web im Allgemeinen und den Google Fonts im speziellen sind nicht so gut. Auf Windows-PC werden sie, je nach Schriftgrösse, schlecht bis sehr schlecht gerendert. Man sieht deutliche Artefakte. Auf Mac-Computern sieht das ganze schon etwas besser aus.

    Will man eine Schrift in die Webseite einbinden, empfiehlt es sich in jedem Fall, zuerst im Google-Font-Previewer alle gewünschten Grössen zu checken.

    • Hallo Edi,

      vielen Dank für dein Feedback zum Thema Google Webfonts. Ja das stimmt schon, besonders bei älteren Monitoren ist die Font-Ansicht teils noch nicht so klasse, aus meiner Erfahrung kommt es an, welche der Schriften man auswählt. Für Fließtexte sind sicher nicht alle geeignet. Vor allem die Droid-Schnitte finde ich allerdings sehr gut lesbar.

      Vorher ausreichend Browser-Tests auch mit dem Font-Previewer und auf einer Test-Seite zu machen, ist aber auf alle Fälle der beste Tipp bei der Auswahl einer passenden Schriftart :-)

      Viele Grüße,
      Ellen

  2. Lobster ist ja klasse. Passt auch zu vielen Anlässen! Danke für die tollen Anregungen…denn irgendwann habe ich vielleicht auch ein Musikblog und dann kann ich die Information wunderbar verwerten! Herzliche Grüße!

    • Hallo Sivani,

      vielen Dank für dein Feedback zum Artikel. Ja, die Lobster eignet sich je nach Blog-Stil vor allem für Überschriften oder ein Logo besonders gut :-)

      Viele Grüße,
      Ellen

  3. Hallo Ellen,
    super, vielen Dank für die Info. Der Font Previewer ist ja der absolute Hammer. Sowas hab ich gesucht.

    Gruß, Chris

    • Hallo Chris,

      vielen Dank für dein Feedback zum Artikel. Es freut mich, dass du den Tipp zu den Webfonts und dem Google Font Previewer hilfreich findest :-)

      Viel Spaß beim Testen der Fonts und viele Grüße,
      Ellen

  4. Die Google-Fonts einzusetzen ist ein Kinderspiel und verlangt keinerlei Registration wie andere Webfonts-Services. So hab ich Google-Schriften schon recht schnell und einfach in verschiedene Projekte eingebaut. Bisher ohne Probleme. Als Wermutstropfen würde ich die (noch) recht geringe Auswahl an Schriftarten ansehen … ausbaufähig!

    PS: Die Droid als Serif und Sans ist meine Lieblings-Google-Freie-Schrift

    • Hallo Martin,

      vielen Dank für deinen Kommentar und deine Erfahrungen mit den Google Webfonts :-)

      Ja, das die Einbettung der Fonts so wunderbar unkompliziert, und im Gegensatz zu Angeboten wie Typekit auch noch Open Source ist, finde ich auch ein großes Plus. So kommen die Google Fonts für die verschiedensten Projekte in Frage. Und hoffentlich kommen in der Zukunft noch etliche weitere Fonts dazu.

      Ja, die Droid-Fonts sind wirklich klasse, und angenehm Augen schonend. Die Schnitte sind auch unsere derzeitigen Favoriten im Google Font Directory :-)

      Viele Grüße,
      Ellen

  5. Interessant habe davon zwar schonmal gehört mich jedoch noch nicht damit beschäftigt. Werde ich mal testen und gucken ob ich das braucen kann. Vielen Dank für die Vorstellung.

    Grüße
    Kevin

    • Hallo Kevin,

      vielen Dank für deinen Kommentar. Es freut mich, dass du den Tipp zu den Google Fonts nützlich findest :-) Ja, probiere es unbedingt einmal aus, ich finde die Google Font API ist wirklich eine große Bereicherung beim Thema Fonts im Web :-)

      Viel Spaß mit den Google Fonts und viele Grüße,
      Ellen

  6. Hi.

    Ich hab vor kurzem http://perlen-schwartz.de/ mit der Font API umgesetzt. Ich find die Einbindung super simpel und gerade für Überschriften sind die Fonts ganz gut geeignet.

    Ich glaub die komplette Copy einer Seite würd ich nicht damit setzten.

    Grüße.

    • Hallo Tocki,

      vielen Dank für dein Feedback zu den Google Webfonts. Hey, ich habe mit die Perlen Schwarz Seite gerade angeschaut, die Fonts kommen ja super rüber, in meiner Ansicht gestochen scharf. Sieht super aus!

      Ja, sicherlich sind die meisten Schriften im Font Directory eher für Überschriften oder Slogans geeignet. Hast du schon einmal die Droid Sans oder die Droid Serif für Fließtexte verwendet? Ich finde diese beiden Fonts eignen sich eigentlich auch super für längere Texte :-)

      Viele Grüße,
      Ellen

      • Hallo Ellen,

        die Droid find ich auch super. Das wäre auch die einzige, die ich momentan im Fließtext verwenden würde. Hab das bisher nur als Spielerei ausprobiert und auch da gilt – wie bei fast allen Fonts fürs Web – dass es unter 12px schon eckig wird. Aber die Schrift mag ich sehr.

        Weiß eigentlich jemand, was angezeigt wird, bis die Font über das javaScript geladen ist? kommt da dann kurzzeitig die Standard-Font des Browsers?

        • Die Google Fonts werden über CSS und @font-face eingebunden. Da kommt also im Gegensatz zu anderen Webfont-Anbietern kein JavaScript zum Einsatz!
          Aus meiner Erfahrung mit webfonts.fonts.com, wo die Schriften per JS eingebunden werden, kann es manchmal beim Laden zu Verzögerungen kommen und dann wird erst der Alternativfont / Systemschrift angezeigt. D.h. kurz nach Laden der Seite „springt“ der Font im ungünstigsten Fall noch um…

  7. Dank für diesen Artikel. Ich weiß nicht, woran es liegt, dass die Webfonts auf meiner Homepage beim Firefox/Mac nicht funktionieren? Beim Firefox/Windows kein Problem. Irgendwelche Tipps? Beste Grüße, Roland

  8. Unter Windows (XP) ist Droid Sans vor allem bei geringer Schriftgröße (11px) leider kaum zu lesen. Richtig gut aussehen tut der Font nur unter Linux (!) und mit dem IE8. Schade eigentlich…

  9. Ich liebe diese Seiten! Endlich mal html/css etc. ganz einfach und übersichtlich erklärt mit unglaublich praktischen Tipps! DANKE. Ich hab Stunden versucht eine andere Schriftart in meinem Theme umzusetzen und hab dann diesen tollen Artikel mit dem ebenso unglaublichen Plugin gefunden. Nochmals Danke.

  10. Hallo. Ich habe die »Nobile« vom Google Font Directory auf einer Webseite eingesetzt. Sie ist dadurch das sie in einer großen Darstellung (13px) eingesetzt ist sehr gut lesbar.

    Ich finde das Directory sehr praktisch.. die »Puritan« ist einer meiner Lieblinge. momentan ;)

  11. Die Google Webfonts sind totale scheisse. Sie funktionieren auf vielen Browser und anscheinend auch auf diversen Betriebssystemen nicht. Ich z.B. kann mir keine einzige Webfont auf meinem Hauptrechner angucken. Die Schriften werden gerissen dargestellt. Bei einem Kollegen ist es auch so. Ich kann jedem nur empfehlen die Finger davon zu lassen und stattdessen Cufon zu verwenden (auch wenn es hier ebenfalls in manchen Browser und natürlich bei ausgeschaltetem JavaScript schwächelt).

  12. Ich stimme Carsten zu, außer das ich bestimmte Worte nutzen würde:)
    Auf dem Mac sehen die Webfonts bei mir ganz gut aus, aber auf dem Windows-PC ebenfalls total unschön fransig…

    Cheers

  13. Hallo Ellen,
    normalerweiser kann man man den Schriftenstil mit font-style definieren.
    Ich möchte gerne die Schrift PT Sans verwenden – diese hat jedoch Schriftstile mit nicht üblichen Namen: 400italic, 700 (bold), 700italic.

    Wie kann ich beispielsweise „bold italic“ verwenden?
    Das hier funktioniert nämlich nicht:
    font-style: ‚700italic‘;

    Geht das mit @font-face?
    Vielen Dank schon mal im Voraus…
    – Mr. Boom

  14. Hallo,

    ich bin gerade am Umbau meines Blogs und habe mir ein Theme gekauft, wo auch die Google Fonts geladen werden.
    Musste feststellen, dass bei jedem Seitenaufruf die Schriften von Google neu nachgeladen werden, was das Ladeverhalten der Seite beeinträchtigt.
    Interessant ist die Möglichkeit schon, aber die Schriften sollten irgendwo gecached werden um die Aufbauzeiten nicht negativ zu beeinflussen.

  15. Hallo, Ellen,
    ich habe meine Website mit MS Publisher 2007 erstellt (Habe nichts anderes.), finde aber die Funktion nicht, um Webfonts einzubinden. Daher momentan alle Texte als Graphiken, was die Auffindbarkeit bei … ähm … Google zB nicht gerade erleichtert.

    Kennt irgendwer da eine Möglichkeit für elektronische Dummies wie mich? Kann (leider) nur in der realen Welt zaubern. ;)

    Philipp

  16. Hi,

    ich war gerade auf der Suche nach einem neuen Theme, und zwar auf dem Mac Mini Snow Leopoard. Piha hat mir für ziemlich gut gefallen, aber die Schrift war total fransig. Auf allen Browsern (Safari, FF, Chrome). Habs dann unter Win7/64 auch auf allen Browsern getestet, genauso furchtbar.
    Nachgegooglet und sehr widersprüchliche Aussagen gefunden, Bildschirm zu alt (kann schon sein, Samsung 21,5“ von uhhh <2006 oder so), oder an Win7/64 (widerlegt, da auf Mac Mini auch böse).

    Auf dem iPad ist hingegen alles super gestochen scharf, spricht also u.U. für die Monitorproblematik.

    Auch diese Seite hier ist optisch unter aller Sau (außer auf dem iPad ;)). Ärgerlich. Vor allem, da es scheinbar keine Lösung dafür gibt.

    Falls also jemand eine Lösung gefunden haben sollte, dann bitte immer her damit.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *