Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak hostować regionalne krój pisma w WordPress dla szybszej witryny internetowej

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

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.

How to Host Local Fonts in WordPress for a Faster Website

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.

OMGF Settings

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.

Click the Save & Optimize Button

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.

Downloading a Google Font

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.

Upload the Fonts to Your Website

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.

Adding Custom CSS With the Theme Customizer

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.

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

7 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    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!

    • WPBeginner Support says

      If you use the plugin, we would not recommend removing it to keep the fonts on your site.

      Administrator

  2. Liz S says

    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 says

      If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method :)

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.