So verwenden Sie variable Schriftarten auf einer WordPress-Website

Veröffentlicht: 2018-07-30

Lass uns ehrlich sein. Wenn Sie auf Ihrer Website eine einzige Schriftart ohne Variation in Gewicht, Höhe oder Abstand verwenden, wird es den Leuten langweilig. Sie werden deine Sachen nicht lesen. Aus diesem Grund müssen Sie auf Ihrer Website variable Schriftarten verwenden . Selbst wenn Sie sich dafür entscheiden, nur eine einzige Schriftart zu verwenden, können Sie sie durch CSS so weit optimieren, dass sie funktional zu einer Vielzahl von Schriftartenoptionen wird.

Was ist eine variable Schriftart?

Variable Fonts sind einzelne Fonts, die durch CSS nach 5 verschiedenen Kriterien oder Achsen verändert werden können. Jede Achse steuert eine bestimmte Facette des Aussehens der Schriftart und hat ein entsprechendes CSS-Label.

  • Gewicht ( Gewicht in CSS)
  • Schräg ( slnt in CSS)
  • Kursiv ( kursiv in CSS)
  • Optische Größe ( opsz in CSS)
  • Breite ( Gewicht in CSS)

Und dann gibt es noch die Pseudo-Achsen-Grade, die in CSS durch GRAD repräsentiert wird. Ich wünschte, ich könnte Ihnen sagen, warum Grade in Ihren Stylesheets in Großbuchstaben geschrieben wird ... aber ich kann nicht. Es ist was es ist. Darüber hinaus können (und werden) im Zuge der Entwicklung der Technologie neue Achsen von verschiedenen Unternehmen eingeführt. Wir werden also in Zukunft viel damit anfangen können.

Wenn Sie all diese verschiedenen Achsen kombinieren, können Sie jede einzelne Schriftart dazu bringen, ungefähr alles zu tun, was Sie möchten – sogar wie SVGs animieren. (Beachten Sie, dass dies auch Symbolschriften wie unsere umfasst.)

Warum variable Schriftarten verwenden?

Die kurze Antwort ist, dass sie weitaus effizienter sind als das Einbetten und Rendern mehrerer Schriftarten auf Ihrer Website. Die Entwicklerdokumentation von Google fasst es gut zusammen:

Variable OpenType-Fonts ermöglichen es uns, mehrere Variationen einer Schriftfamilie in einer einzigen Font-Datei zu speichern. Monotype führte ein Experiment durch, indem es 12 Eingabefonts kombinierte, um acht Strichstärken über drei Breiten sowohl im Kursiv- als auch im Romanstil zu generieren. Das Speichern von 48 einzelnen Schriftarten in einer einzigen Datei mit variabler Schriftart bedeutete eine 88%ige Reduzierung der Dateigröße . (Hervorhebung ihres)

Verwenden variabler Schriftarten in WordPress

Nachdem wir nun wissen, dass variable Schriftarten ziemlich fantastisch sind, besteht der nächste Schritt darin, sie in unseren Workflow und unsere WordPress-Sites zu integrieren.

Schritt 1

Das erste, was Sie tun müssen, ist die Schriftart auf Ihrer Website zu installieren. Sie können entweder ein Plugin wie Use Any Font verwenden, es direkt über die Divi-Schnittstelle hochladen, wenn Sie ein ET-Mitglied sind, mit @font-face darauf verlinken oder ganz auf Plugins und Themes verzichten und es auf die altmodische Weise machen.

So verwenden Sie variable Schriftarten in WordPress

Unabhängig davon, wie Sie es tun, ist die Verwendung der Schriftart, sobald Sie sie auf Ihrer Website haben, ziemlich einfach. Dafür habe ich die kostenlose Schriftart Gingham über Divi hochgeladen, weil ich sie verwende. Das Endergebnis ist das gleiche.

Schritt 2

Da variable Schriftarten CSS-basiert sind, sollten Sie dorthin gehen, wo Sie Ihr benutzerdefiniertes CSS hinzugefügt haben. Das könnte in einer custom.css Datei sein, ein stylesheet.css, in Ihren Wordpress - Customizer des zusätzlichen CSS oder sogar die Unterseite des Divi Theme Options' Registerkarte Allgemein ( die meisten Themen haben eine ähnliche Box, auch). Sie geben diesen Code ein (mit dem Namen der variablen Schriftarten, die Sie verwenden). 

@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

In Ihrem CSS-Fenster sieht es ungefähr so ​​​​aus.

So verwenden Sie variable Schriftarten in WordPress

All dies ermöglicht es Ihnen, die Schriftart auf Ihrer Website zu verwenden.

So verwenden Sie variable Schriftarten in WordPress

Schritt 3

Jetzt ist es an der Zeit, es irgendwie zu stylen. Sie können damit machen, was Sie wollen, und das Styling kann auf jede Klasse oder ID angewendet werden. Wie Sie sehen können, wird dieser auf alle .et_pb_text- Divs angewendet. Sie können es auf den ganzen Körper oder h1, h2, h3 oder sogar p anwenden . Deine Entscheidung. Es sind schließlich variable Schriftarten.

Es gibt zwei Möglichkeiten, wie Sie dies angehen können. Die erste ist eine einzelne, effiziente CSS-Zeile mit font-variation-settings. 

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75; 
}

Sie können diese auch mit anderem CSS hinzufügen, genau wie Float oder Z-Achse oder alles andere.

Alternativ können Sie die Achsen auch auf einzelnen Zeilen eingeben. 

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100;  
}

Beide machen am Ende dasselbe.

So verwenden Sie variable Schriftarten in WordPress

Bildnachweis: Google Developers Guide

Wo finde ich variable Schriftarten?

Variable Schriftarten zu finden ist etwas schwieriger, als nur zu Google Fonts zu gehen (zumal keine der Google Fonts variabel sind). Da die Technologie neu ist, sind variable Schriftarten nicht so weit verbreitet. Sie müssen aufgrund all der Interaktionen zwischen den Achsen individuell erstellt werden, daher sind sie an den Stellen, an denen sie bereitgestellt werden, in der Regel Premium-Schriften zum Kauf.

    Adobe Typekit bietet eine Reihe von variablen Schriftarten zur Auswahl. Mit einer Creative Cloud-Mitgliedschaft erhalten Sie Zugriff auf einen Teil von TypeKit.
  • V-Fonts.com ist ein Verzeichnis mit vielen verschiedenen Orten, an denen Sie variable Schriftarten erhalten können. Sie verlinken auf die verschiedenen Quellen dessen, was sie ziehen.
  • Monotype verkauft variable Schriftarten und es gibt sogar eine kostenlose Demo ihrer FF Meta- Schriftart.

Kostenlose variable Schriftarten

Das heißt, Sie können einige kostenlose einzelne Schriftarten erhalten. Dies sind diejenigen, die von dem entzückend geschmackvollen und immer talentierten Kenny Sing empfohlen werden.

  • Gingham ist das, was wir oben verwendet haben. Kenny hat mich darauf angesprochen, und es ist gut.
  • League Mono ist auch eine gute Wahl für eine einfache, aber vielseitige variable Schriftart.
  • Renners Seite sagt, es sei ein modernes Meisterwerk. Wer bin ich, um zu argumentieren?

Das sollten Sie jetzt tun. Da variable Schriftarten wie Dutzende von Schriftarten in einer Box gepackt sind, laden Sie diese oben herunter und Sie haben Zugriff auf mehr Optionen, als ich zählen kann.

Merken Sie sich

Das einzige, was Sie bei der Verwendung variabler Schriftarten auf Ihrer WordPress-Site beachten müssen, ist Folgendes: Nicht alle Browser unterstützen sie, aber Firefox hat einige Probleme damit. Wenn Sie also vorhaben, den variablen Teil einer variablen Schriftart zu einem unschätzbaren Teil Ihrer Website zu machen, möchten Sie wahrscheinlich einen Notfallplan für Benutzer von Firefox ... oder Microsoft Edge. Aber andererseits haben Sie wahrscheinlich schon einen davon, weil die Leute noch IE 6 verwenden.

Einpacken

Variable Schriftarten bringen mit sehr wenig Arbeit für den Benutzer eine Menge Wert auf den Tisch. Es ist wunderbar, sie mit CSS-Attributen so zu gestalten, wie Sie sie fett oder kursiv hinzufügen könnten. Und da immer mehr Browser beginnen, die verschiedenen Achsen zu erkennen, die für sie entwickelt werden, sollten Sie mit variablen Schriftarten zumindest experimentieren – wenn nicht mit beiden Armen.

Was halten Sie von variablen Schriftarten?

Bildnachweis des Artikels Tyler Finck / tylerfinck.com