Ich sehe, Google Fonts hat ein neues Design eingeführt (Tweet). Im Vergleich zum letzten großen Redesign wirkt dieses viel eher iterativ. Ich kann kaum einen Unterschied erkennen, außer dass es blau statt rot ist und dieses ziemlich coole Kontrollkästchen: **Nur variable Schriftarten anzeigen**.
Eine Option, um *nur* variable Schriftarten anzuzeigen, ist ein ziemlich kühnes Feature für die Hauptnavigation dort oben. Das ist ein starkes Engagement für diese Funktion. Da Google Fonts etwa 90 % Marktanteil bei gehosteten Webfonts hat und Billionen von Anfragen bedient, wird dies das Interesse und die Nutzung von variablen Schriftarten stark ansteigen lassen. Webdesigner und Entwickler sind schon seit einiger Zeit von variablen Schriftarten begeistert, aber ich wette, dieses Jahr werden wir sie in viel größerem Umfang in freier Wildbahn sehen.
Etwas über variable Schriftarten hat die Microsite inspiriert. Siehe v-fonts.com und Axis-Praxis. Hier kommt noch eine: variablefonts.io! Wie die anderen bietet es auch interaktive Beispiele, ist aber auch voller direkter, aktueller Ratschläge und Links zu Ressourcen.
Eine weitere großartige Sache, die Google Fonts vor einiger Zeit eingeführt hat, ist die Möglichkeit, font-display zu verwenden. Es hat einen guten Standardwert (swap) und ist als Query-Parameter leicht änderbar. Matt Hobbs hat einen aktuellen Artikel darüber, was es ist, wie wichtig es sein kann und wie man es verwendet.
Und während wir über Google Fonts sprechen, bin ich neulich auf die Browsererweiterung Snapfont gestoßen. Es ist ein "Pay-what-you-want"-Ding (ich habe ihnen einen Fünfer gegeben).
Es ersetzt einfach jeden Font auf der Seite hart durch einen von Ihnen ausgewählten, um einen schnellen Eindruck zu bekommen. Es gibt keine Optionen, daher ist es nicht zum Feinabstimmen von Entscheidungen gedacht. Der "Heading"-Button hat bei mir nicht einmal funktioniert. Aber mir gefällt, wie einfach und unkompliziert es war, einen schnellen Eindruck von einer Seite mit einem neuen Font zu bekommen.
Hey, danke, dass Sie Snapfont ausprobiert haben! Der Heading-Button entspricht im Grunde nur den Überschriften-Tags. Es gibt seltene Ausnahmefälle, in denen der Überschriften-Font nicht angewendet wird, aber das ist ziemlich selten.
Außerdem bin ich ziemlich begeistert von variablen Schriftarten und Snapfont ist in einer perfekten Position, um variable Schriftarten auszuprobieren, aber leider dauert die Genehmigung einer Chrome-Erweiterung heutzutage 1-3 Wochen. Es ist gerade ein Update in Arbeit, Daumen drücken, dass es nächste Woche genehmigt wird. Wenn Sie das neueste Update erhalten möchten, können Sie die Schriftart immer noch manuell über Gumroad herunterladen (https://gumroad.com/l/getsnapfont) und sie manuell über die Google Extensions-Seite laden.
Ich bin mir nicht sicher, inwiefern es sich von Firefox' Lesemodus unterscheidet
Weiß jemand, wie man die variablen Schriftarten herunterladen kann, um sie auf dem eigenen Server zu hosten? Normalerweise benutze ich diesen Dienst, aber er unterstützt noch keine variablen Schriftarten: https://google-webfonts-helper.herokuapp.com/fonts
Außerdem sehe ich nicht einmal, dass Google Fonts variable Schriftartdateien liefert. Ja, man kann jetzt benutzerdefinierte Schriftschnitte in der Google Fonts-Oberfläche hinzufügen, aber im Browser erhält man nicht nur eine Schriftartdatei, sondern jedes Schriftschnitt ist immer noch eine separate Anfrage und Datei, auch wenn Ihr Browser variable Schriftarten unterstützt. Schauen Sie sich diese CSS-Datei an – sie enthält den benutzerdefinierten Schriftschnitt 666, aber immer noch als zusätzliche, separate woff2-Datei: https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;666
Ok, ich habe es herausgefunden. Man kann die variable Schriftartdatei bekommen, aber nicht über die GUI, sondern über die API. Bauen Sie die URL für die CSS-Datei, öffnen Sie die CSS-Datei und verwenden Sie dann den (kryptischen) Link zur einzelnen variablen Schriftartdatei. Die Syntax wird hier erklärt
https://variablefonts.io/implementing-variable-fonts/#gf-api
https://developers.google.com/fonts/docs/css2#forming_api_urls