Verwenden Sie Google Web Fonts auf Ihrer Website

Ich bin kein Typografie-Experte, aber die Verwendung der gleichen Standardschriftarten für Ihre Website wird langweilig. Google Web Fonts verfügt über eine gesamte Bibliothek gehosteter Schriftarten, die Sie in Ihrem nächsten Webprojekt verwenden können. In diesem Tutorial für technische Rezepte wird erläutert, wie Sie Google Web Fonts auf Ihrer Website einrichten.

1 Browser über http://www.google.com/webfonts/

2 Durchsuchen Sie alle Schriftarten und suchen Sie nach einer, die Sie verwenden möchten. Sie haben die Möglichkeit, nur eine Schriftfamilie oder mehrere zu verwenden. Lassen Sie uns zunächst einen Blick auf die Verwendung einer Zeichensatzfamilie werfen. Beginnen Sie mit der Auswahl des Links „Quick Use“.

3 Sie sehen einige Informationen, z. B. die Ladezeit der Seite, die diese Webschriftart verwendet. Denken Sie daran, dass der Browser den Server von Google überprüfen muss, um die Schriftart zu erfassen und den Besuchern anzuzeigen. In Schritt 3 haben wir drei Optionen für die Verwendung dieser Schriftarten. Wir können einen Standard-Link, @import oder Javascript verwenden. Es hängt von persönlichen Vorlieben ab, aber ich verwende einfach das Standard-Link-Attribut.

4 Jetzt kopieren und fügen Sie den Code in die Kopfzeile Ihrer Website ein, genauso wie Sie einen Link zu einem CSS-Stylesheet erstellen würden.

5 Wir haben jetzt die Schriftart mit unserer Website verlinkt. Wir müssen eines unserer Stilattribute festlegen, damit wir die Schriftart tatsächlich verwenden können. Es ist so einfach, die Schriftfamilie zu deklarieren, aber den Namen Ihrer neuen Schrift zu verwenden. Denken Sie daran, eine Fall-Back-Schriftart zu verwenden, die websicher ist.

6 Hier ist es in Aktion.

7 Um mehrere Schriftfamilien zu verknüpfen, wählen Sie anstelle der Option Schnellverwendung die Option „Zur Sammlung hinzufügen“ für die gewünschten Schriftarten.

8 Sie können dies für beliebig viele Zeichensätze tun. Denken Sie jedoch daran, dass dies die Ladezeit Ihrer Seite erhöhen kann. Wenn Sie alle gewünschten Schriftarten haben, wählen Sie Benutzen rechts unten auf der Website.

9 Sie erhalten den Code erneut, mit der Ausnahme, dass alle Zeichensätze zu einer Link-Anweisung zusammengefasst werden. Fügen Sie den Code in Ihre Kopfzeile ein und gestalten Sie den Inhalt wie in Schritt 4.