Jak hostować lokalne czcionki w WordPress dla szybszej strony internetowej

Piękna typografia może poprawić projekt Twojej witryny i zachwycić odbiorców.

Ale podczas ulepszania wydajności naszej witryny odkryliśmy, że poleganie na zewnętrznych usługach czcionek może spowolnić WordPress, szkodząc doświadczeniu użytkownika i potencjalnie szkodząc Twojemu SEO.

Znaleźliśmy kilka sposobów na uniknięcie tego problemu. Jednym z rozwiązań jest lokalne hostowanie czcionek.

Przejmując kontrolę nad plikami czcionek, Twoja witryna może pominąć te dodatkowe kroki ładowania, zapewniając błyskawicznie szybką witrynę z lepszym doświadczeniem użytkownika i SEO.

W tym artykule pokażemy Ci, jak hostować lokalne czcionki w WordPressie, co pozwoli Ci ulepszyć typografię Twojej witryny przy jednoczesnym zachowaniu optymalnej wydajności.

Dlaczego hostować czcionki lokalnie w WordPressie?

Chociaż typografia i niestandardowe czcionki mogą poprawić ogólną estetykę strony internetowej, mają negatywny wpływ na wydajność Twojego WordPressa. Na przykład, jeśli używasz niestandardowej czcionki z Google Fonts, są one ładowane z usług stron trzecich, co spowolni Twoją witrynę.

Na szczęście istnieje sposób na używanie niestandardowych czcionek bez spowalniania witryny. Nowy interfejs API Webfonts został wprowadzony w WordPress 6.0. Pozwala to na lokalne hostowanie czcionek, dzięki czemu ładują się szybciej.

Innym powodem hostowania czcionek Google lokalnie jest zachowanie zgodności z RODO. Jest to ważne rozważanie prawne, jeśli masz odwiedzających stronę z Unii Europejskiej.

Kiedy ktoś odwiedza witrynę korzystającą z czcionek Google, jego adres IP jest rejestrowany przez Google podczas ładowania czcionek. Ponieważ odbywa się to bez ich zgody, UE uważa to teraz za naruszenie przepisów o ochronie prywatności i możesz być odpowiedzialny za szkody.

Biorąc to pod uwagę, przyjrzyjmy się, jak hostować lokalne czcionki w WordPress, aby uzyskać szybszą witrynę. Omówimy dwie metody, a pierwsza metoda jest zalecana dla większości użytkowników.

1. Hostowanie lokalnych czcionek w WordPress za pomocą wtyczki
2. Ręczne hostowanie lokalnych czcionek w WordPress
3. Przewodniki eksperckie dotyczące czcionek w WordPress

Metoda 1: Hostowanie lokalnych czcionek w WordPress za pomocą wtyczki

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki OMGF (Optimize My Google Fonts). Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

OMGF to jeden z najlepszych wtyczek typograficznych WordPress. Oferuje przyjazny dla początkujących sposób na poprawę wydajności i zgodności z RODO poprzez lokalne hostowanie czcionek Google.

Po aktywacji musisz odwiedzić stronę Ustawienia » Optymalizuj czcionki Google, aby skonfigurować wtyczkę. Powinieneś zobaczyć zakładkę „Optymalizuj czcionki”.

Zwróć uwagę na stwierdzenie pod nagłówkiem „Optymalizuj czcionki Google”, że wystarczy użyć domyślnych ustawień, aby automatycznie zastąpić czcionki Google lokalnie hostowanymi kopiami.

Oznacza to, że podczas przewijania strony ustawień wystarczy upewnić się, że opcja „Font-Display Option” ma domyślne ustawienie „Swap (recommended)” zaznaczone.

Wszystko, co musisz teraz zrobić, to kliknąć przycisk „Zapisz i zoptymalizuj” u dołu strony.

Zobaczysz komunikat u góry ekranu z napisem „Optymalizacja zakończona pomyślnie”.

Gratulacje! Twoje czcionki Google są teraz hostowane lokalnie. Twoja witryna będzie ładować się szybciej i zmniejszyłeś ryzyko europejskich pozwów.

Metoda 2: Ręczne hostowanie lokalnych czcionek w WordPressie

Możesz również hostować czcionki lokalnie bez używania wtyczki, korzystając z metody @font-face z naszego przewodnika na temat jak dodać niestandardowe czcionki w WordPress. Chociaż ta metoda wymaga więcej pracy, pozwala na używanie dowolnych czcionek, które lubisz na swojej stronie.

Musisz pobrać czcionki, których chcesz użyć, w formacie internetowym. Istnieje wiele miejsc, w których można znaleźć świetne darmowe czcionki internetowe, takie jak Google Fonts, Typekit, FontSquirrel i inne.

Jeśli nie masz formatu internetowego dla swojej czcionki, możesz go przekonwertować za pomocą konwertera czcionek internetowych FontSquirrel.

Teraz musisz przechowywać czcionki na swoim hostingu WordPress serwerze. Możesz przesłać pliki za pomocą FTP lub za pomocą menedżera plików cPanel Twojego hostingu.

Powinieneś utworzyć nowy folder o nazwie „fonts” w katalogu swojego motywu lub motywu potomnego i przesłać go tam.

Po przesłaniu czcionki musisz załadować czcionkę w arkuszu stylów motywu za pomocą niestandardowego CSS. Możesz dodać kod bezpośrednio do pliku style.css swojego motywu lub używając sekcji Dodatkowe CSS w narzędziu do dostosowywania motywu.

Możesz to zrobić, używając reguły CSS3 @font-face w następujący sposób:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

Nie zapomnij zastąpić rodziny czcionek i adresu URL własnymi.

Następnie możesz używać tej czcionki w dowolnym miejscu w arkuszu stylów motywu lub w sekcji Dodatkowe CSS w narzędziu do dostosowywania motywu. Kod CSS, którego użyjesz, będzie zależał od Twojego motywu i miejsca, w którym chcesz użyć lokalnej czcionki. Oto przykład z naszej strony demonstracyjnej:

h1 {
font-family: Arvo, Arial, sans-serif;
}

Jak widać, nasz nagłówek używa teraz lokalnie hostowanej czcionki Arvo.

Przewodniki eksperckie dotyczące czcionek w WordPress

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak hostować lokalne czcionki w WordPress, aby uzyskać szybszą witrynę. Możesz również zapoznać się z innymi przewodnikami dotyczącymi używania czcionek w WordPress:

• Co to jest czcionka bezpieczna dla sieci + 19 najlepszych czcionek bezpiecznych dla sieci
• Jak zmienić czcionki w swoim motywie WordPress (łatwe sposoby)
• Jak łatwo zmienić rozmiar czcionki w WordPressie
• Jak dodać niestandardowe czcionki w WordPress
• Jak sprawić, by czcionki Google były przyjazne dla prywatności
• Jak wyłączyć Google Fonts na swojej stronie WordPress
• Jak łatwo dodać ikony czcionek do motywu WordPress
• Najlepsze wtyczki typograficzne WordPress, aby ulepszyć Twój projekt

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.