Als Google Web Fonts zum ersten Mal veröffentlicht wurde, haben wir einen kurzen Überblick gegeben. Seitdem wurde der Service komplett überarbeitet und es ist höchste Zeit für eine gründliche Komplettlösung.
Begleiten Sie uns am Anfang und besprechen Sie, was der Google Web Fonts-Dienst ist und wie er heute auf Ihrer Website installiert werden kann. Geben Sie uns ein paar Minuten Zeit und wir werden Sie für die fantastische Welt der fantastischen kostenlosen Web-Fonts öffnen.
Warum Google Web Fonts?
Einmal war das Web mit langweiligen Standardschriftarten gefüllt. Um die Kompatibilität mit der größten Anzahl von Benutzern sicherzustellen, waren Webdesigner gezwungen, die Auswahl der Schriftart für Live-Text auf die bei den meisten Computern üblichen Schriftarten zu beschränken.
? Die Lizenzierung von Schriftarten kann wirklich ein Durcheinander sein. Direktes Einbetten von zufälligen Schriftarten in eine Webseite ist jedoch nicht immer eine gute Idee.?Dies war im Hinblick auf Konsistenz und Lesbarkeit nicht das Schlimmste auf der Welt, schränkte jedoch die typografische Kreativität des gesamten Webs ein. Mit CSS3 unterstützten die meisten Browser @ font-face, eine Möglichkeit, benutzerdefinierte Schriftarten für eine Webseite bereitzustellen. Leider kann die Lizenzierung von Zeichensätzen wirklich ein Durcheinander sein. Direktes Einbetten von zufälligen Zeichensätzen in eine Webseite ist jedoch nicht immer eine gute Idee.
Web Font Services
Als Lösung stiegen eine Reihe von @ font-face-Web-Font-Diensten auf, wobei der beste und bekannteste wahrscheinlich Typekit ist. Typekit hatte eine schöne Lösung: Durchsuchen Sie die umfangreiche Bibliothek mit Schriftarten und kopieren Sie etwas Code, um ihn auf Ihrer Website zu implementieren.
Typekit hatte eine schöne Lösung: Durchsuchen Sie die umfangreiche Bibliothek mit Schriftarten und kopieren Sie etwas Code, um ihn auf Ihrer Website zu implementieren. ?Das einzige Problem mit Services wie diesem ist, dass die Kostenstruktur von 49 bis 99 US-Dollar, wenn Sie mehr als zwei Websites benötigen, vielen Designern die Verwendung dieser Services untersagt. Google kam und tat, was sie immer tun: nahm einen Premium-Service und bot ihn kostenlos an.
Die Qualität und Vielfalt der Schriftarten, die Sie bei Premium-Diensten wie Typekit finden, sind verständlicherweise viel besser als das, was Sie kostenlos erhalten können. Wenn Sie jedoch nicht im Budget sind, ist Google Web Fonts die beste Wahl.
Die Quintessenz
Das Wichtigste ist: Google Web Fonts ist eine völlig kostenlose und sehr einfache Möglichkeit, nicht standardisierte Schriftarten auf Ihrer Website ordnungsgemäß lizenziert und weitgehend unterstützt zu implementieren.
Lernen Sie Google Web Fonts kennen
Nun, da Sie die Idee haben, ist es Zeit, die Google Web Fonts-Seite anzusehen.
Was Sie hier sehen, ähnelt einer Standardanwendung für Schriftarten. Es ist im Grunde eine riesige Liste aller verfügbaren Schriftarten mit verschiedenen Vorschau- und Filterfunktionen. Beachten Sie, dass sich zum Zeitpunkt dieses Schreibens 506 separate Schriftfamilien in der Bibliothek befinden. Nicht schlecht für einen kostenlosen Service!
Vorschau anpassen
Der größte Teil dieser Seite wird von den Font-Vorschauen beansprucht. Wenn Sie sich für eine Schriftart entscheiden, ist es absolut wichtig, sie auf ähnliche Weise anzuzeigen, wie Sie sie implementieren. Einige Schriftarten sehen großartig aus für Überschriften, aber absolut furchtbar als Körperkopien.
Wenn Sie sich für eine Schrift entscheiden, ist es absolut wichtig, sie auf ähnliche Weise wie bei der Implementierung zu betrachten. ?Glücklicherweise können Sie mit Google Web Fonts Ihre Vorschau an Ihren Anwendungsfall anpassen. Sie können einen benutzerdefinierten Vorschau-Text eingeben und die Größe der Vorschau ändern.
Wenn ich mir wirklich eine Schriftart genauer ansehen möchte, die ich für eine Überschrift verwenden möchte, verwende ich gerne das? Word? Aussicht. Das Rasterlayout ist auch der beste Weg, um schnell durch viele Schriftarten zu blättern.
Das Wichtigste ist, sicherzustellen, dass Sie eine Vorschau der Hauptteilkopie anzeigen, die Sie in der Absatzansicht verwenden möchten. Es ist ehrlich gesagt eine gute Idee, die Verwendung einer benutzerdefinierten Schriftart zu vermeiden, wenn Sie viel Textkopie haben, aber es gibt viele legitime Anwendungsfälle hier, also seien Sie vorsichtig.
Sortieren und Filtern
Wie wir oben gesehen haben, gibt es über fünfhundert Schriftfamilien zum Durchsuchen. Dies kann eine brutale Aufgabe sein, wenn Sie einfach einen Bildlauf nach dem anderen durchführen, aber die Filter- und Sortieroptionen können diesen Vorgang erheblich vereinfachen und Ihnen helfen, genau das zu finden, was Sie brauchen.
Sortierung nach Beliebtheit und Datum hinzugefügt
Schnell können Sie die Sortiermethode ändern. Ich mag es zu sehen, was beliebt ist oder kürzlich hinzugefügt wurde. Es ist auch hilfreich, dass Sie leicht sortieren können, wie viele Stile sich in der Familie befinden. So können Sie sich eine vielseitige Familie zusammenstellen, die in verschiedenen Breiten und Ausführungen verwendet werden kann.
Filtern nach Merkmalen und Stil
Die beste Möglichkeit, Ihre Ergebnisse zu verbessern, ist die Verwendung der Filteroptionen. Dies ist besonders nützlich, wenn Sie die Art der Schrift kennen, die Sie implementieren möchten. Wenn Sie zum Beispiel wissen, dass Sie eine handschriftliche Schrift wünschen, können Sie alle anderen Typen in den Ergebnissen deaktivieren.
Es hört hier nicht auf, Google geht sogar noch weiter, indem Sie die Ergebnisse anhand der Dicke, der Neigung und der Breite der Zeichen anpassen können. Das ist eine wirklich coole Funktion, die ich noch nie zuvor gesehen habe.
Schriftarten auswählen
Google hat ein recht vielseitiges System für die Auswahl und Implementierung verschiedener Schriftarten eingerichtet. Das bedeutet, dass es verschiedene Möglichkeiten gibt, verschiedene Aufgaben auszuführen. Hier gibt es kein richtig oder falsch, nur was für Sie und Ihren einzigartigen Workflow am besten funktioniert.
Eine Möglichkeit zur Arbeit besteht darin, die "Schnelle Verwendung" durchzuschlagen. Schaltfläche, wenn Sie eine Schriftart sehen, die Ihnen gefällt. Dadurch gelangen Sie zu einer Seite, auf der Sie erfahren, wie Sie diese Schriftart verwenden, die wir später sehen werden. Sie können auch das? Pop out? Klicken Sie auf die Schaltfläche, um ein Informationsfenster anzuzeigen, in dem Sie mehr über die Schriftart erfahren.
Wenn Sie mehrere Schriftarten verwenden, ist die effizienteste Art der Arbeit die Verwendung der "Sammlung". Merkmal. Wenn Sie verschiedene Schriftarten finden, die Sie verwenden möchten, klicken Sie auf "Zur Sammlung hinzufügen". Klicken Sie auf die Schaltfläche, um die Schriftart anzuzeigen, die Ihrer Liste am unteren Rand des Bildschirms hinzugefügt wurde.
Von hier aus können Sie Lesezeichen setzen. oder? Herunterladen? Verwenden Sie die Steuerelemente oben auf dem Bildschirm, oder wählen Sie zwischen dem Menüpunkt? und? verwenden? Tasten am unteren Rand des Bildschirms.
Schriftarten verwenden
Wenn Sie bereit sind, diese Schriftarten in Aktion zu sehen, springen Sie zu "Verwenden". Tab. Das erste, was Sie hier sehen, ist eine Liste der Zeichensätze in Ihrer Sammlung mit der Möglichkeit, Ihre verschiedenen Auswahlmöglichkeiten zu aktivieren und zu deaktivieren. Es gibt auch ein praktisches Messgerät, das die Auswirkungen dieser Schriftarten auf die Ladezeit Ihrer Seite abschätzt.
Von hier aus ist das Implementieren der Schriftarten so einfach wie das Kopieren und Einfügen von Code. Für das anfängliche Einbetten stehen drei Optionen zur Auswahl: Standard, @import und JavaScript.
- Standard - Dies ist ein Standard-Stylesheet-Link, den Sie im Kopfbereich Ihrer HTML-Datei einfügen. Dies erspart Ihnen den Schritt des Hinzufügen der @ import-Regel zu Ihrer CSS-Datei, da Sie im Wesentlichen ein Stylesheet hinzufügen, in dem sie bereits enthalten ist.
- CSS - Wenn Sie keine Verknüpfung mit dem automatisch generierten Stylesheet in der Kopfzeile herstellen möchten, verwenden Sie die auf der zweiten Registerkarte angezeigte CSS-@import-Regel.
- JavaScript - Der hier enthaltene Code ist Teil des WebFont Loader, einer JavaScript-Bibliothek, die von Google und Typekit entwickelt wurde und Ihnen eine bessere Kontrolle über das Laden von Schriftarten bietet. Mehr darüber erfahren Sie hier.
Nachdem Sie die Schriftarten korrekt importiert haben, müssen Sie die Schriftarten wie gewohnt in Ihre CSS-Schriftfamilie implementieren. Der Ausschnitt dafür ist in der Nähe des Bodens:
Ein Beispiel
Nun, da wir die verschiedenen Ausschnitte verstehen und was sie tun, gehe ich Ihnen durch, wie ich normalerweise eine Sammlung von Schriftarten implementiere. Das erste, was Sie tun sollten, ist das HTML-Snippet zu packen und wie oben in den HTML-Bereich zu werfen:
Springen Sie als nächstes zum CSS. Was wir hier tun werden, unterscheidet sich stark von dem, was wir oben gesehen haben. Hier ist der Code:
Zuerst habe ich die CSS-Schriftart verwendet, um Platz zu sparen. Dies ermöglicht uns, alle Eigenschaften unserer Schrift in einer einzigen Zeile einzugeben, was großartig ist.
Der erste Wert, den Sie sehen, ist? 400? sowohl in der h1 als auch im Absatz. Ich habe dies eingefügt, um sicherzustellen, dass der Browser diese Schriftarten mit den Strichstärken anzeigt, unter denen sie angezeigt werden sollen, und wir zuvor gesehen haben, dass das beabsichtigte Gewicht 400 beträgt.
Als nächstes habe ich die Schriftgröße eingestellt, aber die Zeilenhöhe. Beachten Sie, dass ich für die Zeilenhöhe keine Art von Einheiten verwendet habe. Dies ist ein netter Trick, bei dem eine relative Zeilenhöhe angewendet wird, die sich mit der Schriftgröße ändert.
Schließlich füge ich die Google-Schriftarten ein und verwende meine eigenen Sicherungen, da ich nicht denke, dass Sie die Standardbrowseroptionen für "Kursiv" verwenden sollten. Das ist, was Google in seinem Snippet verwendet.
Das ist wirklich alles, was wir tun müssen. Laden Sie Ihre Live-Vorschau in einem Browser auf, und Ihre benutzerdefinierten Schriftarten sollten perfekt angezeigt werden.
Geh es benutzen!
Sie haben soeben alles über die Verwendung von Google Web Fonts erfahren. Jetzt ist es an der Zeit, dieses Wissen in Ihre eigene Website zu integrieren. Durchsuchen Sie die verfügbaren Schriftarten und überlegen Sie, wie Sie die Typografie in Ihren Projekten verbessern können. Denken Sie immer daran, dass bei benutzerdefinierten Schriftarten weniger mehr ist. Gehen Sie einfach und verwenden Sie dieses Tool selektiv.
Wenn Sie Probleme bei der Auswahl haben, lesen Sie bitte unsere Sammlung von 10 großartigen Google-Schriftkombinationen, die Sie kopieren können (auch Teil zwei!).
Google-Schriftarten
Google Fonts ist eine Bibliothek mit über 800 verschiedenen Schriftarten, die vollständig in Ihr Webprojekt eingebettet werden können. In dieser Serie wird erläutert, was Google Fonts ist. Sie zeigt interessante Beispiele und Kombinationen von Schriftarten, mit denen Ihr Projekt auf die nächste Stufe gebracht werden kann.