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

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

Was sind Google Fonts?

"Google Fonts wurde 2010 als technische Initiative gestartet, um das Web voranzutreiben und zu beschleunigen." - Google Design

Google Fonts wurde 2010 eingeführt und entwickelte sich schnell zur größten kostenlosen Open-Source-Auswahl von Schriftarten im Internet. Alle Google-Schriftarten 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 nutzt 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äsentationsmappen, Hochzeitseinladungen, Websites und Büchern gesehen.

Alle und ihre Mutter verwenden Google Fonts

Wer erstellt die Schriften?

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 Schriftart 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. Hört sich das ekelhaft an? Ja, aber ich denke nicht, dass es Sie davon abhalten sollte, Google Fonts zu verwenden.

Ein weiterer tröstlicher Grund, warum Google sich für Schriften interessiert, ist, dass sie Open-Source-Webschriften für die breite Masse zugänglich machen möchten. Sie möchten ein schnelleres, schöneres Web erstellen, das einfacher zu navigieren und zu verwenden ist. Sie haben auch 2010 mit Google Fonts begonnen, als ein solcher Dienst dringend benötigt wurde, und damit ein weiteres Problem gelöst, das wir im Internet hatten. #dontbeevil

Quelle - fonts.google.com/about

Warum sollte ich sie in Betracht ziehen?

Sie können nicht frei schlagen. Habe ich recht? Abgesehen davon, dass Sie kostenlos sind, sollten Sie Google Fonts für Ihr nächstes Webdesign-Projekt in Betracht ziehen, weil ...

  • Die Schriftarten sind einfach auf Ihrer Website zu implementieren
  • Es gibt über 850 Schriftarten zur Auswahl (und Zählung)
  • Die Gesamtqualität der Schriften nimmt weiter zu
  • Google Fonts können auch zum Drucken 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 die Ergebnisse nach Schriftstil, Sprachen, Beliebtheit und Gewichtung filtern. Google Fonts bietet auch neue Schriftarten, wenn Sie die Seite "Empfehlungen" aufrufen.

fonts.google.com

2) Suchen Sie nach Schriften, die Sie mögen

Wenn Sie einen Schriftfamiliennamen 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 die Schaltfläche mit dem Pluszeichen, um die Schriftfamilie zur „Auswahlliste“ hinzuzufügen, die am unteren Bildschirmrand angezeigt wird.

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

5) Klicken Sie auf das Auswahlfach, um alle von Ihnen ausgewählten Schriftarten anzuzeigen

In der "Auswahlliste" sehen Sie alle 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 „Auswahlliste“ können Sie den Code abrufen, den Sie kopieren / in den HTML- und CSS-Code Ihrer Website einfügen

In der Auswahlliste kopieren Sie den Code, um ihn in HTML und CSS einzufügen. Damit Google Fonts auf Ihrer Website verwendet werden kann, muss sowohl die Schriftfamilie mit der Google Fonts-API verknüpft sein (im HTML-Code) als auch die Schriftfamilie angegeben sein (im CSS-Code).

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

Dies ist Ihre letzte Chance, Ihren Schriftfamilien unterschiedliche Schriftschnitte und -stile hinzuzufügen, bevor Sie sie zu Ihrer Website hinzufügen. Fügen Sie nur die Schriftstärken und -stile hinzu, die Sie benötigen, da die Schriftarten Ihrer Site umso langsamer geladen werden, je mehr Sie hinzufügen.

8) Kopieren Sie den HTML-Code und fügen Sie ihn in den Ihrer 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 zu den richtigen Elementen in Ihren CSS-Dateien hinzufügen.

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

Vergessen Sie nicht, zu speichern und zu aktualisieren!

Aktualisieren Sie Ihre lokalen Dateien und Sie sollten die neue Schriftfamilie sehen. In diesem Fall handelt es sich um eine Google-Schrift namens Lato.

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

Mehr lesen

  • „Google Fonts neu erfinden“ von Yuin Chien (Google Design)
  • "6 Tipps für eine bessere Schriftpaarung" von Hayden Mills (Font Pair)
  • "Auswählen von Web-Schriftarten: Ein Leitfaden für Anfänger" von Google Fonts

Danke fürs Lesen

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

Außerdem bin ich der Ersteller von Font Pair, mit dessen Hilfe Sie Google Fonts miteinander verknüpfen können. Testen Sie unsere neue Medium-Veröffentlichung, um weitere Typografie-Beiträge zu lesen!