Bei den Google-Fonts handelt es sich um kostenlos nutzbare Web-Fonts, die auf der eigenen Webseite eingesetzt werden können. Erfahrt hier, wie ihr die attraktiven Schriften auf den schnellen Google-Servern nutzen, einbinden und sogar downloaden könnt.
Google-Web-Fonts sind eigentlich nicht für den Computer gedacht. Das Angebot richtet sich an Webdesigner, die ihre Seiten mit den professionellen Google-Fonts gratis aufpeppen wollen, ohne den Seitenaufbau zu verlangsamen. Diese Schriften können auf jedem Gerät so angezeigt werden, wie der Designer es gewollt hat, ohne dass die Schriftarten installiert werden müssten. Hier verraten wir euch, wo ihr die Schriften findet. wie ihr sie in euren Webauftritt einbindet und sogar, wie ihr die Fonts downloaden könnt.
Die Web-Fonts zusammenstellen und einbinden
In der Liste der vielen HTML-Befehle findet ihr unter anderem auch Möglichkeiten, mit denen ihr Schriften in die Webseiten einbinden könnt, die eigentlich auf einem Server gespeichert sind. Das ist die Grundlage der Google-Fonts. Google bietet Schriften aus über 800 verschiedenen Font-Familien an, die ihr mit wenigen Zeilen in euer Design integriert.
Ihr findet die Web-Schriften von Google unter https://fonts.google.com/. Dort könnt ihr durch die verschiedenen Schriftarten stöbern und sie zur späteren Verwendung markieren. Dazu ist kein Google-Konto nötig. Jeder kann dort Google-Fonts aussuchen, um sie nach Belieben einzusetzen.
So stellt ihr euch eine Schriftenkollektion aus Google-Fonts zusammen und bindet sie in eurer Seite ein:
- Geht zur Webseite von Google-Fonts.
- Ihr seht eine Übersicht mehrerer Schriften und rechts ein Menü. Dort könnt ihr einstellen, welche Art von Schriften ihr sucht – also zum Beispiel Handschriften und Serifen-Schriften. Außerdem legt ihr dort einige andere Parameter fest: Die Sortierung, die Dicke, die Anzahl von Schriftstilen und mehr.
- Browst nun durch die Google-Schriften. Ihr könnt direkt in das angezeigte Beispiel klicken, um eigenen Text einzugeben. In der Regel enthalten die Fonts Umlaute und das ß.
- Wenn ihr mit der Maus über das Schriftbeispiel fahrt, werden weitere Optionen eingeblendet.
- Klickt auf das rote Plus-Zeichen neben einem Schriftnamen, um diese Schriftfamilie in eure Auswahl zu übernehmen. Unten am Bildschirm wird angezeigt, wieviel Schriften ihr bereits gewählt habt.
- Wenn ihr darauf klickt, fährt das Fenster nach oben.
- Hier seht ihr nun die nötigen Befehlszeilen, die ihr in den HTML- beziehungsweise CSS-Code einfügen müsst, um die ausgewählten Google-Fonts in euer Design einzubinden.
Diese Schriften wendet ihr nun im weiteren Design an, indem ihr sie entweder über einen CSS-Selektor aufruft, oder den HTML-Tag „Font-Family“ nutzt. Um also eine importierte Schrift namens „Lobster“ einzubinden, nutzt ihr im HTML-Code folgende CSS-Technik:
<span style="font-size: 12pt;"><div style="font-family: 'Lobster', cursive;">Euer Text</div></span>Tipp zum Thema
Die 10 besten Google Web-Fonts
Google-Fonts downloaden
„Eigentlich“ sollen Google-Web-Fonts ja in Webseiten genutzt werden. Aber das würde ihr Potential gar nicht richtig nutzen. Viele der Schriften sehen auch am PC gut aus, und wenn ihr sie für eure Druck-Designs oder Briefe verwenden wollt, könnt ihr auch Google-Fonts downloaden. Das ist leichter, als man denken würde, auch wenn diese Option etwas unauffällig ist.
Die Schriften werden als True-Type-Fonts in einer ZIP-Datei auf eurem PC gespeichert. Jeder Schrift liegt eine Ausgabe der „Open Font Lizenz“ bei, die euch die freie Verwendung erlaubt.
So könnt ihr die Google-Fonts downloaden:
- Stöbert durch die Schriftarten auf der Google-Fonts-Webseite.
- Wenn euch eine Schrift gefällt, markiert sie mit dem roten Plus-Zeichen neben dem Schriftnamen. Sie wird daraufhin eurer Sammlung hinzugefügt.
- Wenn ihr fertig seid, klickt unten auf der Seite auf den schwarzen Balken. Es öffnet sich das Fenster mit der Aufzählung der Schriften und den Einbindungscodes rechts oben einen roten, nach unten gerichteten Pfeil zeigt. Das ist der Download-Pfeil und ein Klick darauf lässt euch die Schriften herunterladen.
Anschließend entpackt ihr die Zip-Datei und installiert die Schriften auf eurem Computer. Dank des verbreiteten TTF-Formates sind sie frei und stufenlos skalierbar. Falls vorhanden, werden dabei auch gleich mehrere Schriftschnitte eingepackt.
