Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
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

111111 Piękna typografia może poprawić wygląd twojej witryny internetowej i przyciągnąć uwagę odbiorców.

Jednak poprawiając wydajność naszej witryny internetowej, odkryliśmy, że poleganie na zewnętrznych usługach w zakresie krojów pisma 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 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:

1
2
3
4
5
@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:

1
2
3
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

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak hostować lokalne czcionki w WordPressie, aby uzyskać szybszą witrynę internetową. Możesz również zapoznać się z innymi przewodnikami związanymi z używaniem czcionek w WordPress:

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 komentarzyLeave a Reply

  1. 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.

      Admin

  2. 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.

      Admin

  3. 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 :)

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.