Przejście do systemowego stosu czcionek w WordPress (jak i dlaczego)

Jestem wielkim fanem wydajności internetowej. Ale uważam też, że nie powinno, ani nie musi iść na kompromis w kwestii designu. Pośrodku zawsze jest dobra równowaga. W 2017 roku byłem na blogu GitHub i kopałem ich czcionkę. To było bardzo łatwe do odczytania. Sięgnąłem więc do właściwości za pomocą Chrome Devtools i zobaczyłem, że używają one systemowego stosu czcionek .

Od lat używam czcionek systemowych i uwielbiam je. Dlatego dzisiaj chcę pokazać, jak korzystać ze stosu czcionek systemowych w witrynie WordPress.

Co to jest systemowy stos czcionek?

Istnieją różne rodzaje czcionek do wyboru na stronie internetowej. Masz prawie cztery różne opcje:

• Czcionki bezpieczne w Internecie: Przeglądarka jest bezpłatna i nie wymaga czasu pobierania, ale zazwyczaj wyglądają na przestarzałe i dlatego nie są często używane. Nikt tak naprawdę nie lubi Ariala ani Tahomy, prawda? Zobacz pełną listę czcionek bezpiecznych w Internecie.
• Czcionki internetowe: wyglądają pięknie, ale wymagają pobrania przez przeglądarkę. Dostępne są zarówno opcje bezpłatne, jak i premium. Dodaje do ogólnej wagi strony w Twojej witrynie. Mogą być jednak obsługiwane z buforowanej sieci CDN. Dostawcy obejmują Google, Adobe Fonts (TypeKit) itp.
• Hostuj czcionki internetowe lokalnie: dostępne są zarówno opcje bezpłatne, jak i premium. Nadal wymaga czasu pobierania i może korzystać z pojedynczego połączenia HTTP/2 w buforowanej sieci CDN. Wszystkie główne przeglądarki mają teraz oddzielne partycjonowanie pamięci podręcznej, więc hostowanie ich lokalnie jest faktycznie lepsze pod względem wydajności. Możesz hostować swoje czcionki Google lokalnie za pomocą Perfmatters.
• Czcionki systemowe: bezpłatne, wyglądają bardzo dobrze, ponieważ pasują do systemu operacyjnego i nie wymagają czasu pobierania! Są używane przez Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (przeczytaj historię czcionek systemowych), PubMed, a nawet pulpit WordPress. Moim zdaniem czcionki systemowe wyglądają nieco lepiej na macOS w porównaniu z Windows.

Czcionki systemowe nie są niczym nowym. W rzeczywistości Medium używało ich w 2015 roku. Czują się jak twój system operacyjny , ponieważ używają czcionek natywnych. Wiele nowoczesnych systemów operacyjnych bardzo mądrze wybiera czcionki i wszystkie mają bardzo elegancki wygląd. To nie jest jak powrót do bezpiecznej w Internecie czcionki Arial lub Times New Roman. Zaufaj mi; nikt nie chce oglądać Times New Roman na stronie internetowej.

A co najważniejsze, czcionki systemowe działają tak samo jak czcionki bezpieczne w Internecie, ponieważ nie wymagają żadnego czasu pobierania przez przeglądarkę. Pomoże to zmniejszyć ogólną wagę strony w Twojej witrynie. Od kwietnia 2022 r. czcionki internetowe stanowią średnio około 6,07% całkowitej wagi witryny. Chociaż nie jest to ogromne, pamiętaj, że każda niewielka optymalizacja, którą wykonasz, zwiększa szybkość witryny, zwłaszcza na urządzeniach mobilnych.

Czy są jakieś wady korzystania z czcionek systemowych? Nie! To jest piękno tego. Ostrzeżenia w PageSpeed ​​Insights, takie jak „Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek”, nigdy nie wchodzą w grę, ponieważ technicznie nic nie jest pobierane.

CSS stosu czcionek systemowych

Dzięki właściwości font-family z czcionkami internetowymi zazwyczaj masz czcionkę podstawową i jedną lub dwie czcionki zapasowe. W przypadku czcionek systemowych musisz uwzględnić wszystkie różne systemy operacyjne, a zatem musisz ułożyć kilka dodatkowych czcionek. Dlatego nazywa się to „stosem czcionek systemowych”.

Na przykład, oto jak CSS może wyglądać z czcionką internetową.

 rodzina czcionek: „Open Sans”, „Helvetica Neue”, sans-serif;

A oto jak może wyglądać systemowy stos czcionek. Dobra wiadomość jest taka, że ​​nie wszystkie się ładują; to tylko kolejność, w jakiej czcionki powinny być ładowane z systemu operacyjnego, jeśli są dostępne.

 rodzina czcionek: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Czy wiesz, że Twój pulpit nawigacyjny WordPress używa systemowego stosu czcionek? Oto czego używają.

 rodzina czcionek: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks ma również alternatywną metodę stosowania czcionek systemowych za pomocą @font-face.

Ściągawka stosu czcionek systemowych

Tutaj musisz wybrać odpowiednią konfigurację. Oto lista czcionek, które pasują do każdego systemu operacyjnego. Uwaga: to się zmienia z biegiem czasu, więc może być konieczne ponowne sprawdzenie czcionek w miarę pojawiania się nowych systemów operacyjnych. Dopilnuję, aby ta lista była aktualizowana.

Jak zaimplementować systemowy stos czcionek

Używam systemowego stosu czcionek tutaj na workup.com i na wszystkich innych moich stronach internetowych. Czuję, że w końcu znalazłem to, co najlepsze z obu światów. A oto jak to zrobiłem.

Opcja 1: Użyj motywu GeneratePress WordPress

Chcesz, żeby to było super łatwe? Po prostu przejdź do motywu GeneratePress, którego używam na wszystkich moich stronach internetowych. W konfiguratorze, w obszarze Typografia, możesz po prostu wybrać "Stos systemowy". I to wszystko!

Inne motywy skoncentrowane na wydajności, takie jak Astra, również mają opcję korzystania z czcionek systemowych.

Opcja 2: Dodaj systemowy stos czcionek za pomocą CSS

Jeśli używasz innego motywu WordPress, możesz łatwo przejść do stosu czcionek systemowych z odrobiną CSS.

Krok 1

W WordPressie musisz zmienić CSS w swojej font-family . Możesz użyć dostosowywania WordPress, aby dodać kod, w sekcji „Dodatkowy CSS”.

Krok 2

Wpisz następujący kod. Może się to różnić w zależności od tematu, ale w przypadku większości poniższe powinny zastąpić wszystko. Używam tego samego stosu czcionek systemowych co GithHub, z tą różnicą, że dodaję system-ui , ponieważ nowsze wersje Chrome to obsługują. Pamiętaj, że zostaną użyte w kolejności, w jakiej pojawiają się w stosie.

 body {rodzina czcionek: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {rodzina czcionek:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, bezszeryfowy, "Apple Color Emoji", "Segoe UI Emoji" ", "Symbol interfejsu Segoe";}

W zależności od motywu może być konieczne dodanie znaczników akapitu do treści treści. Więc byłoby tak:

 body, p {rodzina czcionek: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

Krok 3

Będziesz także chciał wyłączyć wszelkie czcionki innych firm, takie jak Google Fonts, które załadowałeś z motywu WordPress. To znowu może się różnić, ponieważ każdy programista w inny sposób zawiera czcionki. Ale wiele motywów ma teraz łatwy sposób włączania i wyłączania czcionek Google.

Jeśli używasz jednego z domyślnych motywów WordPress, możesz z łatwością skorzystać z bezpłatnej wtyczki Disable Google Fonts. Możesz też wyłączyć czcionki Google w naszej wtyczce Perfmatters.

Przed i po testach prędkości

I oczywiście nie mogłem się oprzeć. Oto przed i po testach prędkości. Każdy test wykonywano pięć razy i brano pod uwagę średnią.

Test prędkości przed

Oto test prędkości wcześniej, kiedy ładowałem czcionki Google.

Test prędkości po

Oto test szybkości po użyciu mojego stosu czcionek systemowych. Jak widać, zmniejszyłem całą wagę mojej strony o około 60 KB i pozbyłem się trzech żądań. Jeden na fonts.googleapis.com, a następnie dwa pliki do pobrania dla różnych wersji Roboto o różnej grubości czcionki. Systemowy stos czcionek był o około 6% szybszy niż przy użyciu czcionek Google .

Znam wiele witryn, które używają 4-5 różnych grubości lub stylów czcionek, a czasem nawet 2-3 różnych czcionek Google. Możesz więc potencjalnie zobaczyć jeszcze więcej znaczących ulepszeń niż nawet ja.

Przeniosłem również naszą witrynę WordPress novashare.io do czcionek systemowych i uzyskałem świetne wyniki; sprawdź ten test prędkości poniżej.

Wygładzanie czcionek

Wygładzanie czcionek sprowadza się do osobistych preferencji. Po zastosowaniu antyaliasingu czcionka będzie nieco cieńsza i jaśniejsza. Nie używam go na tej stronie, ponieważ wolę nieco grubszą czcionkę; Myślę, że jest trochę cieplej. Ale możesz poeksperymentować z obydwoma, aby zobaczyć, który z nich Ci się podoba.

Możesz dodać to do ciała.

 ciało {
-webkit-font-smoothing: wygładzanie;
-moz-osx-font-smoothing: skala szarości;
}

Streszczenie

Czcionki systemowe mogą być świetną alternatywą dla czcionek internetowych i czcionek bezpiecznych w Internecie. Nadal bardzo podoba mi się wygląd mojej czcionki i teraz wiem, że nie powoduje to żadnego obciążenia dla użytkowników. Mimo że czcionki Google mogą być hostowane lokalnie, nadal stanowią część ogólnej wagi strony.

Ciekawe, jakie są twoje myśli? Czy korzystałeś już ze stosu czcionek systemowych w WordPressie? Jeśli tak, daj mi znać poniżej.