Jak korzystać ze zmiennych czcionek w witrynie WordPress?

Opublikowany: 2018-07-30

Bądźmy szczerzy. Jeśli użyjesz jednej czcionki w swojej witrynie bez zmian w wadze, wysokości lub odstępach, ludzie będą się nudzić. Nie przeczytają twoich rzeczy. Dlatego musisz używać czcionek zmiennych w swojej witrynie. Nawet jeśli zdecydujesz się używać tylko jednej czcionki, możesz dostosować ją na tyle za pomocą CSS, aby funkcjonalnie stała się mnóstwem czcionek do wyboru.

Co to jest czcionka zmienna?

Czcionki zmienne to pojedyncze czcionki, które mogą być zmieniane przez CSS zgodnie z 5 różnymi kryteriami lub osiami. Każda oś kontroluje jeden konkretny aspekt wyglądu czcionki i ma odpowiadającą jej etykietę CSS.

  • Waga (wght w CSS)
  • Skok ( slnt w CSS)
  • Kursywa ( ital w CSS)
  • Rozmiar optyczny ( opsz w CSS)
  • Szerokość ( waga w CSS)

A potem jest pseudooś Grade, reprezentowana przez GRAD w CSS. Szkoda, że ​​nie mogę ci powiedzieć, dlaczego Grade jest pisana wielkimi literami, gdy jest używana w twoich arkuszach stylów… ale nie mogę. Jest tak, jak jest. Dodatkowo nowe osie mogą być wprowadzane (i są) przez różne firmy w miarę rozwoju technologii. Tak więc w przyszłości będziemy mogli z nimi wiele zrobić.

Łącząc wszystkie te różne osie, możesz sprawić, by każdy krój pisma robił z grubsza wszystko, co chcesz — nawet animować go jak SVG. (Uwaga, dotyczy to również czcionek ikon, takich jak nasza).

Dlaczego warto używać czcionek zmiennych?

Krótka odpowiedź brzmi, że są one znacznie bardziej wydajne niż osadzanie i renderowanie wielu czcionek w witrynie. Dokumentacja programisty Google ładnie to podsumowuje:

Czcionki zmienne OpenType umożliwiają przechowywanie wielu odmian rodziny czcionek w jednym pliku czcionki. Firma Monotype przeprowadziła eksperyment, łącząc 12 czcionek wejściowych, aby wygenerować osiem grubości w trzech szerokościach, zarówno w stylu kursywy, jak i rzymskiej. Przechowywanie 48 pojedynczych czcionek w jednym pliku czcionek zmiennych oznacza 88% zmniejszenie rozmiaru pliku . (podkreśl ich)

Korzystanie ze zmiennych czcionek w WordPress

Teraz, gdy wiemy, że czcionki zmienne są całkiem fantastyczne, następnym krokiem jest włączenie ich do naszego przepływu pracy i witryn WordPress.

Krok 1

Pierwszą rzeczą, którą musisz zrobić, to zainstalować czcionkę na swojej stronie. Możesz użyć wtyczki, takiej jak Użyj dowolnej czcionki, przesłać ją bezpośrednio przez interfejs Divi, jeśli jesteś członkiem ET, połączyć do niej za pomocą @font-face lub całkowicie zrezygnować z wtyczek i motywów i zrobić to w staromodny sposób.

Jak korzystać ze zmiennych czcionek w WordPress

Bez względu na to, jak to zrobisz, gdy już masz to na swojej stronie, używanie czcionki jest naprawdę łatwe. W tym celu przesłałem darmową czcionkę Gingham przez Divi, ponieważ tego właśnie używam. Wynik końcowy jest taki sam.

Krok 2

Ponieważ czcionki zmienne są oparte na CSS, będziesz chciał przejść do miejsca, w którym dodałeś niestandardowy CSS. To może być w pliku custom.css, a stylesheet.css w WordPress customizer Dodatkowe CSS, a nawet dno karcie Ogólne Divi Opcje tematu (większość motywy mają podobną pole, zbyt). Wprowadzisz ten kod (z nazwą dowolnej używanej czcionki zmiennej). 

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

Będzie to wyglądać mniej więcej tak w twoim oknie CSS.

Jak korzystać ze zmiennych czcionek w WordPress

Wszystko to pozwala na użycie czcionki na swojej stronie internetowej.

Jak korzystać ze zmiennych czcionek w WordPress

Krok 3

Teraz nadszedł czas, aby to jakoś wystylizować. Możesz z nim zrobić, co chcesz, a stylizację można zastosować do dowolnej klasy lub identyfikatora. Jak widać, ten jest stosowany do dowolnego elementu div .et_pb_text . Możesz zastosować go do całego ciała lub h1, h2, h3, a nawet p. Twój wybór. W końcu są to czcionki zmienne.

Można do tego podejść na dwa sposoby. Pierwszym z nich jest pojedyncza, wydajna linia CSS wykorzystująca ustawienia wariacji czcionek. 

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

Możesz dodać je również za pomocą innego CSS, tak jak float, oś z lub cokolwiek innego.

Alternatywnie można wprowadzić osie w poszczególnych liniach. 

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

W końcu oboje robią to samo.

Jak korzystać ze zmiennych czcionek w WordPress

Źródło obrazu: Przewodnik dla programistów Google

Gdzie mogę znaleźć czcionki zmienne?

Znalezienie czcionek zmiennych jest trochę trudniejsze niż przejście do czcionek Google (zwłaszcza, że ​​żadna z czcionek Google nie jest zmienna). Ponieważ technologia jest nowa, czcionki zmienne nie są tak rozpowszechnione. Muszą być wykonane indywidualnie ze względu na wszystkie interakcje między osiami, więc w miejscach, które je zapewniają, są to zazwyczaj czcionki premium do kupienia.

    Adobe Typekit oferuje wiele różnych czcionek do wyboru. Dostęp do niektórych zestawów TypeKit uzyskasz dzięki członkostwu Creative Cloud.
  • V-Fonts.com to katalog wielu różnych miejsc, w których można znaleźć czcionki zmienne. Łączą się z różnymi źródłami tego, co ciągną.
  • Monotype sprzedaje czcionki zmienne, istnieje nawet bezpłatna wersja demonstracyjna czcionki FF Meta .

Darmowe zmienne czcionki

To powiedziawszy, możesz uzyskać bezpłatne pojedyncze czcionki. To te polecane przez zachwycająco gustownego i zawsze utalentowanego Kenny'ego Singa.

  • Gingham jest tym, czego użyliśmy powyżej. Kenny mnie na to umieścił i jest dobry.
  • League Mono to także dobry wybór, jeśli chodzi o prostą, ale wszechstronną czcionkę zmienną.
  • Strona Rennera mówi, że to współczesne arcydzieło. Kim jestem, żeby się kłócić?

To powinno na razie wystarczyć. Ponieważ czcionki zmienne są jak dziesiątki czcionek zapakowanych w jedno pudełko, pobierz te powyżej i masz dostęp do większej liczby opcji, niż jestem w stanie zliczyć.

Pamiętać

Jedyną rzeczą, o której musisz pamiętać, używając czcionek zmiennych w witrynie WordPress, jest to, że nie wszystkie przeglądarki je obsługują, ale Firefox na przykład ma z nimi pewne problemy. Więc jeśli planujesz uczynić zmienną część zmiennej czcionki nieocenioną częścią swojej witryny, prawdopodobnie będziesz potrzebować planu awaryjnego dla osób korzystających z Firefoksa… lub Microsoft Edge. Ale z drugiej strony, prawdopodobnie masz już jeden z nich, ponieważ ludzie nadal używają IE 6.

Zawijanie

Czcionki zmienne wnoszą do tabeli mnóstwo wartości przy bardzo niewielkim nakładzie pracy ze strony użytkownika. Możliwość stylizowania ich za pomocą atrybutów CSS, tak jak można dodać pogrubienie lub kursywę, jest cudowna. A ponieważ coraz więcej przeglądarek zaczyna rozpoznawać różne osie, które są dla nich opracowywane, zmienne czcionki będą czymś, z czym chcesz przynajmniej poeksperymentować — jeśli nie objąć obiema ramionami.

Co sądzisz o czcionkach zmiennych?

Artykuł wyróżniony obrazem Tyler Finck / tylerfinck.com