111111 Piękna typografia może poprawić wygląd twojej witryny internetowej i przyciągnąć uwagę odbiorców. Jednak jako eksperci w dziedzinie wydajności WordPressa stwierdzamy, że poleganie na zewnętrznych usługach w zakresie krojów pisma może spowolnić twoją witrynę, szkodząc doświadczeniu użytkownika i potencjalnie szkodząc SEO.
Rozwiązaniem jest hostowanie czcionek lokalnie. Przejmując kontrolę nad plikami pism, twoja witryna może pominąć te dodatkowe etapy wczytywania, zapewniając niesamowicie szybką witrynę internetową z lepszym doświadczeniem użytkownika i SEO.
W tym artykule pokażemy ci, jak hostować regionalne czcionki w WordPressie, co pozwoli ci ulepszyć typografię twojej witryny przy zachowaniu optymalnej wydajności.
Dlaczego warto hostować krój pisma lokalnie w WordPress?
Podczas gdy typografia i własne czcionki mogą poprawić ogólną estetykę witryny internetowej, mają one negatywny wpływ na wydajność WordPressa. Na przykład, jeśli używasz własnego konfiguratora czcionek z Google Fonts, to są one wczytywane z usług stron trzecich, co spowolni twoją witrynę internetową.
Na szczęście istnieje sposób na korzystanie z własnych czcionek bez spowalniania twojej witryny. Nowy interfejs API Webfonts został wprowadzony w WordPress 6.0. Pozwala to na lokalne hostowanie czcionek, dzięki czemu wczytują się one szybciej.
Innym powodem, dla którego warto hostować krój pisma Google lokalnie, jest zachowanie zgodności z RODO. Jest to ważna kwestia prawna, jeśli witryna internetowa jest odwiedzana przez importerów z Unii Europejskiej.
Kiedy ktoś przechodzi na witrynę internetową, która korzysta z czcionek Google, jego adres IP jest logowany przez Google, gdy czcionki są wczytywane. Ponieważ odbywa się to bez zgody użytkownika, UE uznaje to za naruszenie przepisów dotyczących prywatności, a użytkownik może zostać pociągnięty do odpowiedzialności odszkodowawczej.
W związku z tym przyjrzyjmy się, jak hostować lokalne czcionki w WordPressie, aby przyspieszyć działanie witryny internetowej. Omówimy dwie metody, a pierwsza z nich jest zalecana dla większości użytkowników.
Metoda 1: Hostowanie regionalnych krojów pisma w WordPressie za pomocą wtyczki
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki OMGF (Optimize My Google Fonts). Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
OMGF to jedna z najlepszych wtyczek typograficznych do WordPressa. Oferuje przyjazny dla początkujących sposób na poprawę wydajności i zgodności z RODO poprzez lokalne hostowanie krójów pisma Google.
Po włączaniu należy przejść na stronę Ustawienia ” Optymalizuj krój pisma Google, aby skonfigurować wtyczkę. Powinieneś spojrzeć na kartę „Optymalizuj czcionki”.
Powiadomienie pod nagłówkiem „Optymalizuj czcionki Google” mówi, że wystarczy użyć ustawień domyślnych, aby automatycznie zastąpić twoje czcionki Google kopiami hostowanymi lokalnie.
Oznacza to, że przewijając stronę ustawień w dół, wystarczy upewnić się, że w „Opcji wyświetlania pisma” wybrano domyślne ustawienie „Zamień (zalecane)”.
Wszystko, co musisz teraz zrobić, to kliknąć przycisk „Zapisz i zoptymalizuj” u dołu strony.
U góry ekranu pojawi się komunikat „Optymalizacja zakończona pomyślnie”.
Gratulacje! Twoje czcionki Google są teraz hostowane lokalnie. Twoja witryna internetowa będzie wczytywać się szybciej, a Ty zmniejszysz ryzyko europejskich pozwów sądowych.
Metoda 2: Ręczne hostowanie regionalnych krojów pisma w WordPressie
Czcionki można również hostować lokalnie bez użycia wtyczki, korzystając z metody @font-face z naszego przewodnika na temat dodawania własnych czcionek w WordPress. Chociaż ta metoda wymaga więcej pracy, pozwala na użycie dowolnego kroju pisma na twojej witrynie internetowej.
Musisz pobrać czcionki, których chcesz używać 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 twój krój pisma nie ma formatu internetowego, możesz go przekonwertować za pomocą generatora FontSquirrel Webfont.
Teraz musisz zapisać czcionki na twoim serwerze hostingowym WordPress. Możesz przesłać pliki za pomocą FTP lub za pomocą menedżera plików cPanel twojego hosta.
Powinieneś utworzyć nowy katalog o nazwie „fonts” w katalogu twojego motywu lub motywu potomnego i wgrać go tam.
Po załadowaniu czcionki należy wczytywać ją do arkusza stylów twojego motywu za pomocą własnego CSS. Możesz dodać kod bezpośrednio do pliku style.css twojego motywu lub korzystając z sekcji Dodatkowe CSS w konfiguratorze motywu.
Można to zrobić za pomocą reguły CSS3 @font-face, takiej jak ta:
@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 pisma i adresu URL twoim własnym.
Następnie możesz użyć tej czcionki w dowolnym miejscu w arkuszu stylów twojego motywu lub w sekcji Dodatkowe CSS konfiguratora motywu. CSS, którego użyjesz, będzie zależał od twojego motywu i miejsca, w którym chcesz użyć regionalnego fontu. Oto przykład z naszej demonstracyjnej witryny internetowej:
h1 {
font-family: Arvo, Arial, sans-serif;
}
Jak widać, nasz nagłówek używa teraz hostowanego lokalnie kroju pisma Arvo.
Przewodniki ekspertów po krojach pisma w WordPressie
Teraz, gdy już wiesz, jak hostować regionalne czcionki, możesz chcieć zobaczyć kilka innych przewodników związanych z używaniem czcionek w WordPress.
- Co to jest bezpieczna czcionka internetowa + 19 najlepszych bezpiecznych czcionek internetowych
- Jak zmienić krój pisma w twoim motywie WordPress (proste sposoby)
- Jak łatwo zmienić wielkość liter w WordPressie
- Jak dodać własne czcionki w WordPressie?
- Jak sprawić, by krój pisma Google był przyjazny dla prywatności?
- Jak wyłączyć krój pisma Google na twojej witrynie internetowej WordPress?
- Jak łatwo dodać krój pisma z ikonkami do twojego motywu WordPress?
- Najlepsze wtyczki WordPress do typografii, które poprawią twój projekt
Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak hostować lokalne czcionki w WordPressie, aby przyspieszyć działanie witryny internetowej. Możesz również zapoznać się z naszym przewodnikiem na temat tego, jak zwiększyć ruch na blogu lub z naszą ekspercką listą niezbędnych wtyczek WordPress do rozwoju twojej witryny.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
KENNETH GRAY
Do I remove the wp google fonts plugin once the fonts have been moved over to my website?
k
WPBeginner Support
If you use the plugin, we would not recommend removing it to keep the fonts on your site.
Administrator
Ashikur Rahman
do i need to keep this plugin or i can remove that?
WPBeginner Support
If you are using the plugin then we would recommend keeping the plugin active.
Administrator
Liz S
Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?
WPBeginner Support
If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method
Administrator