Verwendung von Google-Schriftarten in Ihrem nächsten Webprojekt und warum Sie dies tun sollten

Die Wahl der Schriftart ist eine wesentliche Designentscheidung für jede Website, aber wir sind meistens mit derselben alten Serifen- und Sansserif-Familie zufrieden. Während der Hauptteil des Textes immer aus Gründen der Lesbarkeit optimiert sein sollte, wenn nicht die Leser Kopfschmerzen bekommen sollen, können Titel und herausragender Text Ihr Raum sein, um ein einzigartiges Design mit einem gewissen Font-Flair hinzuzufügen.

Lesen Sie weiter, um zu erfahren, wie Sie Google Web Fonts auf Ihrer Website verwenden.

Hintergrund

Mit CSS können Sie eine Kette von Zeichensätzen angeben, die verwendet werden soll, wenn der bevorzugte nicht verfügbar ist. Dies ermöglicht Ihnen eine erste Wahl - vielleicht eine weniger gebräuchliche, aber freie Schriftart. Dann haben Sie Backups, die bei Windows oder Macs immer vorhanden sind. Im Allgemeinen werden Webdesigner jedoch auf bewährte und bewährte Schriftfamilienketten zurückgreifen, wie von den w3-Schulen beschrieben.

Wenn in der Vergangenheit eine andere Schriftart gewünscht wurde, mussten Designer stattdessen Bilder für den Text erstellen - Logo, Kopfzeilen usw. Die Nachteile:

• Bilder lassen sich nicht gut vergrößern.
• Bilder können von Bildschirmleseprogrammen nicht gelesen werden.
• Sie können den Text in Bildern nicht hervorheben.
• Suchmaschinen können nicht “lesen” Bilder.
• Das Laden von Bildern verlangsamt die Webseite.

Gibt es eine bessere Lösung? Eine, mit der wir eine universell verfügbare Gruppe von freien Schriftarten verwenden können, ohne auf Bilder zurückzugreifen?

Google Web Fonts

Die Antwort kommt von Google. Google Web Fonts ist im Wesentlichen eine Sammlung von (bei der aktuellen Anzahl), 489) In der Cloud gespeicherte optimierte Schriftarten, die in Ihre Webprojekte eingebettet werden können (oder auch nur heruntergeladen werden können, um sie auf Ihrem Computer zu verwenden).

Darüber hinaus erleichtert die Google Web Fonts-Website den Vergleich und die Auswahl. Anschließend erhalten Sie den gesamten Code, den Sie zum Einbetten der Schriftart über Javascript oder CSS benötigen - dazu später mehr.

Fertig machen

Gehen Sie zur Web-Fonts-Site und klicken Sie auf Wählen Sie Schriftarten aus beginnen.

Die Benutzeroberfläche ist ziemlich selbsterklärend - auf der linken Seite können Sie nach bestimmten Schlüsselwörtern suchen. und nach Basisschriftart filtern; oder filtern Sie nach bestimmten Faktoren wie der Briefstärke. Die Leiste oben passt nur den Vorschautext an. Wenn Sie einen bestimmten Textabsatz haben, den Sie testen möchten, wechseln Sie zum Beispiel zur Absatzregisterkarte und fügen Sie Ihren Text ein.

Wie ich bereits erwähnt habe, ist es besser für dich, nichts zu schickes für den Hauptinhaltstext zu wählen, also bleib bei Serif- oder Sans-Serif-Familien, wenn du wirklich etwas Einzigartiges anstrebst.

Wenn Sie eines sehen, das Ihnen gefällt, fügen Sie es einfach Ihrer Sammlung hinzu.

Drücke den Rezension Klicken Sie auf, um den Überprüfungsmodus aufzurufen und alle Ihre Optionen zu vergleichen.

Im Überprüfungsmodus werden verschiedene Schriftgrößen und ein Absatz- oder Überschriftentext angezeigt. Das System wird auch eine intelligente Entscheidung treffen, anhand derer Sie abhängig vom typischen Anwendungsfall dieser Schriftart angezeigt werden. Sie können jedoch den Vorschaumodus ändern, wenn Sie möchten.

Scrollen Sie nach rechts, um andere Schriftarten in Ihrer aktuellen Sammlung anzuzeigen. Klicken Sie oben rechts auf das X, um sie abzulehnen.

Probefahrt ist ein besonders interessanter Modus, bei dem alle Schriftarten in Ihrer Sammlung kombiniert werden, um zu zeigen, wie sie in einem einfachen Seitenlayout aussehen könnten.

OK, gewählt. Wie benutze ich sie??

Klicken Sie mit der eingeengten Sammlung auf die Schaltfläche Rezension Taste auf der großen blauen Leiste. Wenn Sie über Bord gegangen sind und zu viele hinzugefügt haben (in der Regel maximal 2), werden Sie durch die Anzeige zum Laden der Seitenlasten gewarnt.

Scrollen Sie nach unten, um den entsprechenden Code zu erhalten. Hier gibt es 3 Möglichkeiten:

• Standard (link rel = Methode): Dies muss in den HEAD-Abschnitt Ihrer Website eingefügt werden, damit Sie mit HTML vertraut sein können. Für WordPress fügen Sie es hinzu header.php wenn du diesen Weg wählst Ich kann es nicht empfehlen.
• @einführen: Diese Methode wird direkt in Ihre Stylesheet-Datei übernommen. In diesem Fall werden wir die Schriftarten für die verschiedenen Seitenelemente trotzdem angeben. Daher empfehle ich das persönlich. Platzieren Sie es für WordPress-Themes in style.css gleich nach den Themeninformationen
• Javascript: selbsterklärend - Platzieren Sie den Code an einer beliebigen Stelle in Ihrem Thema. Die Verwendung dieser Methode hat den Vorteil, dass die Schriftart asynchron geladen wird. Die Site wird zuerst in der Fallback-Schriftart angezeigt und wechselt nach dem vollständigen Laden der Schriftart. Obwohl die anfängliche Seitenladezeit schneller ist, führt dies für den Benutzer zu einer plötzlichen plötzlichen Änderung, die Sie möglicherweise nicht möchten.

Das ist Schritt 1. In Schritt 2 geben Sie die Schriftart an, an der Sie sie verwenden möchten. Wir haben hier keinen Platz für ein vollständiges CSS-Lernprogramm (ich schlage vor, diese 5 CSS-Lernseiten zu besuchen. Die 5 besten Webseiten, um CSS Online zu lernen. Die 5 wichtigsten Webseiten, um CSS Online zu lernen. Lesen Sie mehr und meine eigenen 5 Baby-Schritte in CSS-Lernprogramm 5 Baby Steps to CSS erlernen und ein Kick-Ass-CSS-Zauberer werden 5 Baby-Schritte zum Erlernen von CSS und ein Kick-Ass-CSS-Zauberer CSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt gesehen haben, und sie hat den Weg für die Trennung von Stil und Stil geebnet Inhalt: Auf moderne Art definiert XHTML die semantische Struktur (Read More), aber es genügt zu sagen, dass Sie alles in Ihrem Stylesheet anpassen, das besagt Schriftfamilie, Stellen Sie sicher, dass Sie den von Google vorgeschlagenen Sicherungsstil angeben.

Optimiert

Wenn Sie eine nicht standardmäßige Schriftart verwenden, die der Benutzer herunterladen muss, wird das Laden Ihrer Seite um ein wenig Zeit verlängert - das ist unvermeidlich. Ein typischer Webfont von Google ist jedoch etwa 100 KB groß - zum Vergleich ist dies ungefähr so ​​groß wie ein mittelgroßes JPEG-Bild von guter Qualität. Wie Bilder wird auch die Webschriftart im Browser des Benutzers zwischengespeichert, sodass nur das anfängliche Laden der Seite etwas verzögert wird.

Zusammenfassung

Ich gebe es zu - ich liebe Schriftarten. Ich erwarte, wie viele von Ihnen, ich neige dazu, sie auf meiner Festplatte abzulegen - nur für den fall, weißt du?! Jetzt kann ich in meinen Webprojekten tatsächlich einige einzigartige Schriftarten verwenden - ich bin begeistert. Bitte, Vernachlässigen Sie nicht die Schriftarten auf Ihrer Website!

Wenn Sie Fragen zur Implementierung von Webfonts auf Ihrer Website haben, können Sie in den Kommentaren nachfragen, und ich werde nachsehen, ob ich helfen kann.