So verwenden Sie Google Fonts in Ihrem nächsten Webdesign-Projekt

Sie haben wahrscheinlich gehört, dass Google Hunderte von kostenlosen Web-Schriftarten bereit hält, die für Ihr nächstes Projekt verwendet werden können. Aber wie verwenden Sie sie auf Ihrer Website? Dieser Artikel führt Sie durch die Schritte, die erforderlich sind, um sie auf Ihrer Website zum Laufen zu bringen. Es sollte weniger als 10 Minuten dauern!

Was sind Google Fonts?

"Google Fonts wurde erstmals 2010 als technische Initiative gestartet, um das Web voranzubringen und schneller zu machen." - Google Design

Google Fonts wurde 2010 eingeführt und entwickelte sich schnell zur größten kostenlosen Open-Source-Auswahl an Schriftarten im Internet. Alle Google Fonts sind für den kommerziellen und persönlichen Gebrauch kostenlos. Die Google Fonts-Website erleichtert es jedem, schnell verschiedene Schriftarten für seine eigenen Designanforderungen auszuwählen und zu verwenden.

Wer verwendet Google Fonts?

Jeder tut es! Grafikdesigner, UX-Designer, Forscher, Entwickler, Webdesigner, Blogger, Social Media Manager, Unternehmer, Künstler, Studenten, Lehrer, Fotografen und viele mehr. Ich habe Google Fonts auf Werbetafeln, Postern, Präsentationsdecks, Hochzeitseinladungen, Websites und Büchern gesehen.

Wer erstellt die Schriftarten?

Google Fonts arbeitet mit Schriftdesignern, Schriftgießereien und der Design-Community auf der ganzen Welt zusammen. Diese Personen und Organisationen entwerfen die Schriftarten, die Sie in Google Fonts sehen. Zum Beispiel ist Łukasz Dziedzic ein unabhängiger Schriftdesigner, der die beliebte Schrift Lato entworfen hat. Eine Schriftgießerei namens ParaType entwarf die Schrift PT Serif.

Warum interessiert sich Google für Schriftarten?

Jeder Google Fonts API-Link auf einer Website bietet Google die Möglichkeit, mehr Data Mining durchzuführen. Klingt das eklig? Ja, aber ich denke nicht, dass es Sie davon abhalten sollte, Google Fonts zu verwenden.

Ein weiterer beruhigender Grund, warum Google sich für Schriftarten interessiert, ist, dass Open-Source-Web-Schriftarten für die breite Masse zugänglich gemacht werden sollen. Sie möchten ein schnelleres und schöneres Web erstellen, das einfacher zu navigieren und zu verwenden ist. Sie haben Google Fonts bereits 2010 gestartet, als ein solcher Dienst dringend benötigt wurde, und damit ein weiteres Problem gelöst, das wir im Internet hatten. #dontbeevil

Warum sollte ich in Betracht ziehen, sie zu verwenden?

Sie können nicht frei schlagen. Habe ich recht? Sie sollten nicht nur kostenlos sein, sondern auch Google Fonts für Ihr nächstes Webdesign-Projekt verwenden, weil…

  • Die Schriftarten sind einfach auf Ihrer Website zu implementieren
  • Es stehen über 850 Schriftarten zur Auswahl (und es wird gezählt).
  • Die Gesamtqualität der Schriftarten nimmt weiter zu
  • Google Fonts können auch für den Druck heruntergeladen werden

Okay, okay, okay! Nun dazu, wie Sie sie verwenden.

So verwenden Sie Google Fonts - Schritt für Schritt

1) Gehen Sie zur Google Fonts-Website

Besuchen Sie die Google Fonts-Website, auf der Sie aus 853 Schriftfamilien auswählen und zählen können! Auf der Website können Sie Ergebnisse nach Schriftstil, Sprachen, Beliebtheit und Gewicht filtern. Google Fonts bietet auch neue Schriftarten, wenn Sie die Seite "Vorgestellt" besuchen.

2) Suchen Sie nach Schriftarten, die Ihnen gefallen

Wenn Sie einen Schriftfamiliennamen im Sinn haben, können Sie danach suchen.

3) Klicken Sie auf "+", wenn Sie bereit sind, es zu verwenden

Jede Schriftfamilie verfügt über eine Plus-Schaltfläche in der oberen rechten Ecke. Klicken Sie auf das Pluszeichen, um die Schriftfamilie zur „Auswahlschublade“ hinzuzufügen, die am unteren Bildschirmrand angezeigt wird.

4) Wiederholen Sie die Schritte 1 bis 3, wenn Sie nach mehr als einer zu verwendenden Schriftart suchen

5) Klicken Sie auf die Auswahlschublade, um alle von Ihnen ausgewählten Schriftarten anzuzeigen

In der „Auswahlschublade“ sehen Sie alle von Ihnen hinzugefügten Schriftarten. Hier finden Sie den Code, den Sie Ihrer Website hinzufügen können. Sie haben auch die Möglichkeit, die Schriftarten auf Ihren Desktop herunterzuladen.

6) In der „Auswahlschublade“ können Sie den Code abrufen, den Sie kopieren / in den HTML- und CSS-Code Ihrer Website einfügen

Aus der „Auswahlschublade“ kopieren Sie den Code, um ihn in HTML und CSS einzufügen. Damit Google Fonts auf Ihrer Website funktioniert, muss sowohl die Schriftfamilie mit der Google Fonts-API verknüpft sein (im HTML-Code) als auch die angegebene Schriftfamilie (im CSS).

7) Fügen Sie auf Wunsch verschiedene Schriftstärken und -stile hinzu, indem Sie auf die Registerkarte „Anpassen“ klicken

Dies ist Ihre letzte Möglichkeit, Ihren Schriftfamilien verschiedene Schriftstärken und -stile hinzuzufügen, bevor Sie sie Ihrer Website hinzufügen. Fügen Sie nur die Schriftstärken und -stile hinzu, von denen Sie wissen, dass Sie sie benötigen. Je mehr Schriftarten Sie hinzufügen, desto langsamer werden sie auf Ihrer Site geladen.

8) Kopieren Sie den HTML-Code und fügen Sie ihn in Ihre Website ein

Okay, wir sind fast fertig! Jetzt müssen wir nur noch den HTML- und CSS-Code kopieren und in Ihre Website einfügen. Kopieren Sie zunächst den HTML-Link in den Kopf Ihres HTML-Dokuments.

9) Kopieren Sie die CSS-Regel und fügen Sie sie in die CSS-Datei Ihrer Website ein

Schließlich müssen wir auch die CSS-Regeln kopieren und in Ihre CSS-Datei einfügen. Wenn Sie eine Google-Schriftart für Ihre Website hinzufügen, können Sie die Regeln der CSS-Schriftfamilie in Ihr Body-Tag einfügen. Andernfalls müssen Sie sicherstellen, dass Sie es den richtigen Elementen in Ihren CSS-Dateien hinzufügen.

10) Speichern Sie beide Dateien (HTML und CSS), aktualisieren Sie Ihre Website und zeigen Sie die neue Schriftart an

Vergessen Sie nicht zu speichern und zu aktualisieren!

So ist es richtig! Sie haben Ihre erste Google-Schriftart erfolgreich auf Ihrer Website implementiert. Herzlichen Glückwunsch, Sie codieren Sie. Es ist fair zu sagen, dass Google Fonts im Grunde…

Mehr lesen

  • "Reimagining Google Fonts" von Yuin Chien (Google Design)
  • "6 Tipps für eine bessere Schriftpaarung" von Hayden Mills (Schriftpaar)
  • "Auswählen von Web-Schriftarten: Ein Leitfaden für Anfänger" von Google Fonts

Danke fürs Lesen

Fühlen Sie sich frei, unten einen Kommentar zu hinterlassen oder mich bei Fragen auf Twitter zu kontaktieren ✌️

Außerdem bin ich der Schöpfer von Font Pair, mit dem Sie Google Fonts miteinander koppeln können. Schauen Sie sich unsere neue Medium-Publikation an, um weitere Typografie-Beiträge zu lesen!