Google Fonts: neue Oberfläche nutzen

An verschiedenen Stellen – beispielsweise im „Website Kompendium“ – beschreibe ich, wie man individuelle Schriften dank Google Fonts verwendet. Die klassische Oberfläche, die ich zeige, erreicht man auch weiterhin unter https://www.google.com/fonts/, die neue befindet sich bei https://fonts.google.com/. Hier zeige ich kurz, wie man die neue Oberfläche einsetzt.

Direkt auf der Startseite lässt sich gut testen, wie ein eigener Schriftzug beim gewählten Font aussieht, dafür tippt man direkt  in das große Feld.

 

Fonts testen

Der Font lässt sich dann durch Klick auf das Plus-Zeichen hinter dem Font-Namen auswählen.

Font durch Plus auswählen

Am unteren Bildschirmrand erscheint dann, wie viele Schriften ausgewählt sind.

Font auswählen

Wenn man daraufklickt, kommt man zur Auswahl, bei der sich einzelne Schriften auch wieder entfernen lassen. Ein Klick auf den Pfeil zeigt ein Fenster mit dem Code zum Einbinden „Embed“. Bei „Customize“ kann man hingegen noch Anpassungen durchführen und beispielsweise Schriftschnitte wählen oder  Zeichenauswahl beeinflussen.

font_embed

Das Link-Element muss  kopiert und in den head-Bereich des Dokuments eingefügt werden.

Dann kann man im Stylesheet, dort wo gewünscht, den Font einsetzen.

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>