Jak korzystać z czcionek Google z WordPress?

Współczesna sieć to przede wszystkim doświadczenie użytkownika. Firmy inwestują dużo czasu i pieniędzy, aby zapewnić odwiedzającym ich witrynę jak najlepsze wrażenia podczas przeglądania ich witryny.

Reprezentacja tekstowa odgrywa integralną rolę w estetyce serwisu. Nie ma znaczenia, jak dobra jest jakość Twoich treści; jeśli czytanie nie jest przyjemne i jest zbyt zagracone dla czytelników, wszystkie twoje wysiłki idą na marne.

Chociaż dostępnych jest wiele opcji typograficznych, najłatwiejszym sposobem uzyskania dostępu do setek profesjonalnych czcionek (bezpłatnie) jest użycie czcionek Google w witrynie WordPress.

W tym poście przedstawię Ci instrukcje krok po kroku, aby dowiedzieć się, jak ręcznie dodać czcionki Google WordPress do swojej witryny i za pomocą wtyczki Easy Google Fonts . Pokażę Ci również najlepsze czcionki, których możesz użyć, aby poprawić czytelność treści Twojej witryny.

1- Czym są czcionki Google WordPress i dlaczego warto ich używać?

Zanim zaczniemy, przyjrzyjmy się szybko, czym są czcionki Google wraz z kluczowymi zaletami ich używania w witrynie WordPress.

Google Fonts to biblioteka darmowych licencjonowanych czcionek wprowadzona w 2010 roku. Możesz korzystać z niesamowitej biblioteki Google Fonts, wywołując dostarczony interfejs API. Ciekawostką jest to, że możesz używać 877 czcionek zoptymalizowanych pod kątem sieci – za darmo. To jest niesamowite. Zawiera interaktywny katalog stron internetowych, który umożliwia wyszukiwanie określonych typów czcionek i testowanie ich w przeglądarce internetowej.

Korzystanie z WordPress Czcionki Google ma wiele zalet. Można ich używać za darmo (nawet w przypadku projektów komercyjnych), wstępnie hostowane (więc nie zajmują zasobów serwera) i można je pobrać (można ich używać w wersji drukowanej).

Istnieje wiele stron internetowych, które obecnie wykorzystują czcionki Google w WordPress na swoją korzyść. Wszystkie nowoczesne motywy obsługują korzystanie z czcionek Google.

Jeśli jesteś gotowy, aby odświeżyć typografię swojej witryny za pomocą łatwych w użyciu czcionek internetowych, wszystko, co musisz zrobić, to znaleźć odpowiednie czcionki i używać ich w witrynie WordPress.

2- Jak ręcznie dodać czcionki Google do WordPress?

Google Fonts eliminuje większość problemów związanych z osadzaniem rodzin czcionek w Twojej witrynie. Jest to biblioteka online, którą można wywołać w dowolnym projekcie internetowym, jak każdy inny skrypt JS lub CSS.

W tej sekcji zademonstruję, jak ręcznie zainstalować czcionki Google w witrynie WordPress.

Krok 1: Znajdź czcionkę, którą chcesz dodać do swojej witryny

Aby rozpocząć, przejrzyj katalog czcionek Google i wybierz czcionkę, której chcesz użyć w swojej witrynie WordPress. Jeśli masz już określony krój pisma, możesz go po prostu wyszukać za pomocą pola wyszukiwania na prawym pasku bocznym.

Możesz także filtrować czcionki według kategorii, języków, liczby stylów, grubości, pochylenia i szerokości lub sortować je według daty dodania, alfabetycznie, trendów lub popularności.

• Są to czcionki z małymi liniami na końcu kresek literowych, np. Times New Roman i Courier .
• Bezszeryfowy. Czcionki, które nie mają małych linii na końcu pociągnięć liter, to czcionki bezszeryfowe, np. Helvetica i Roboto .
• Czcionki ekranowe są używane głównie do dużych tekstów, np. tytułów.
• Czcionki, które mają wygląd odręczny, np. Pacifico .
• Czcionki, które mają dokładnie takie same odstępy między wszystkimi znakami, np. Source Code Pro .

Jedną z największych zalet korzystania z funkcji interaktywnego katalogu Google Fonts jest to, że możesz szybko wyświetlić podgląd czcionek, które Cię interesują. Wszystko, co musisz zrobić, to kliknąć pole z czcionką i wpisać w nim tekst.

Na potrzeby tego samouczka skorzystam z Open Sans .

Krok 2: Dodaj czcionki do swojego wyboru

Teraz, gdy wiemy, z jaką czcionką będziemy korzystać, dodajmy ją do naszego wyboru. Możesz to zrobić, klikając znak plus (+) w prawym górnym rogu pola rodziny czcionek.

Do wyboru możesz dodać dowolną liczbę rodzin czcionek. Gdy wszystko będzie gotowe, kliknij czarny pasek Wybrana rodzina X u dołu ekranu, aby wyświetlić swój wybór.

Krok 3: Dostosuj czcionkę

Pasek Wybrana rodzina X otwiera okno z dwiema zakładkami – Osadź i Dostosuj . Zanim osadzimy rodzinę czcionek w naszej witrynie WordPress, poświęcimy chwilę, aby ją nieco dostosować.

Na ekranie Dostosuj zaznacz pola dla stylów i języków, których chcesz używać w swojej witrynie.

Pamiętaj, że im więcej stylów czcionek i języków wybierzesz, tym dłużej zajmie wczytanie stron Twojej witryny. Na tym samym ekranie zobaczysz wskaźnik czasu wczytywania, który informuje, czy Twój wybór spowolni czas wczytywania.

Aby nasz wybór czcionek nie wpływał na czas ładowania strony naszej witryny, zdecydowaliśmy się na prosty wybór — jasna 300 i zwykła 400 .

Krok 4: Osadź czcionki Google w swojej witrynie WordPress

Istnieje wiele sposobów dodania niestandardowej czcionki do WordPressa. Pokażemy Ci, jak to zrobić za pomocą funkcji wp_enqueue_style(), ponieważ jest to zalecane podejście dla witryn WordPress.

Zacznij od powrotu do karty Osadź i skopiuj link (URL) wybranej czcionki do schowka. W naszym przypadku pełny adres URL to: https://fonts.googleapis.com/css?family=Open+Sans:300,400 .

Następnie zaloguj się do pulpitu WordPress i wewnątrz Appearance przejdź do Edytora i otwórz plik functions.php aktywnego motywu za pomocą klienta FTP i dodaj do niego następujący kod.

 funkcja add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300,400', false );}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Uwaga: musisz zastąpić adres URL własnym.

Możesz zacząć używać właśnie dodanej czcionki, korzystając z opcji typografii motywu (jeśli je obsługuje) lub dodając kod do głównego arkusza stylów aktywnego motywu. Na przykład, gdybyśmy chcieli zmienić wszystkie nagłówki h2 na naszą nową czcionkę, nasz kod może wyglądać mniej więcej tak:

 godz.2 {

rodzina czcionek: 'Open Sans', bezszeryfowa;

}

Pomyślnie zaktualizowałem swój WordPress za pomocą Google Fonts. Możliwe, że Google Fonts może nie działać z jakichś dziwnych powodów i napotkam to, że muszę odwołać się do domyślnego zestawu czcionek, który można wyświetlić jako kopię zapasową. Ale zdarza się to dość rzadko.

Dlaczego szybkość jest kluczowa dla SEO i UX?

Te porady ekspertów pokażą Ci, jak poprawić szybkość swoich witryn WordPress.

Zgadzam się z Warunkami świadczenia usług i Polityką prywatności Cloudways

Kup e-booka teraz!

Dziękuję

Twój ebook jest już w drodze do Twojej skrzynki odbiorczej.

Aby to zrobić, po prostu dodaj domyślne typy czcionek hostowanych lokalnie, takie jak Georgia, Cambria lub Courier.

3- Jak dodać czcionki Google do WordPress za pomocą wtyczki?

Dla niektórych ręczna integracja czcionek Google WordPress może nie być opcją. Nie martw się. Istnieje inny (prostszy) sposób na dodanie czcionek Google do witryny WordPress. Poprzez wtyczkę.

W tej sekcji pokażę, jak zintegrować Google Fonts z WordPress za pomocą wtyczki Easy Google Fonts .

Krok 1: Zainstaluj i aktywuj wtyczkę

Zaloguj się do panelu administracyjnego WordPressa i przejdź do Wtyczki > Dodaj nowy . Wyszukaj Easy Google Fonts i zainstaluj go w swojej witrynie.

Po zainstalowaniu wtyczki kliknij przycisk Aktywuj , aby zacząć z niej korzystać.

Krok 2: Zacznij korzystać z czcionek Google

Gdy aktywujesz wtyczkę w swojej witrynie, automatycznie umieści ona w kolejce arkusze stylów dla czcionek Google, których chcesz używać. Aby rozpocząć, przejdź do Wygląd > Dostosuj z panelu administracyjnego WordPress.

Zauważysz, że do dostosowywania WordPressa dodano nowy element menu o nazwie Typografia .

Pozwala kontrolować ustawienia typografii akapitów i różnych nagłówków (od H1 do H6).

Załóżmy, że chcesz edytować czcionkę Akapit w swojej witrynie, wtyczka Easy Google Fonts pozwala dostosować jej style, wygląd i położenie. Przyjrzyjmy się różnym opcjom stylu, które oferuje.

Na karcie Style możesz skonfigurować swój skrypt, rodzinę czcionek, grubość czcionki, dekorację tekstu i transformację tekstu. Opcja rodziny czcionek zapewnia dostęp do setek czcionek Google sklasyfikowanych jako standardowe czcionki internetowe , czcionki Google Serif , Google Sans Serif Fonts , Google Display Fonts , Google Handwriting Fonts i Google Monospace Fonts .

Tak więc, gdybyśmy chcieli użyć Open Sans , ustawilibyśmy opcję skryptu na Latin , opcję rodziny czcionek na Open Sans , a wagę czcionki na Regular (co jest odpowiednikiem Regular 400 ).

Po prostu sprawdź, jak zmieniła się czcionka na ekranie podglądu? Jedną z głównych zalet korzystania z wtyczki Easy Google Fonts jest możliwość podglądu na żywo, jak wyglądają Twoje posty i strony, gdy wybierasz czcionkę.

4- Najlepsze czcionki do użycia

Niebo jest granicą, jeśli chodzi o wybór czcionek za pomocą Google Fonts. Jako webmaster możesz wybrać dowolną czcionkę, którą uznasz za odpowiednią dla swoich czytelników. Istnieje jednak kilka czcionek, które są popularne ze względu na czytelność.

Przyjrzyjmy się najlepszym czcionkom Google, które są powszechnie używane i zapewniają najlepszą czytelność.

1. Lora

Lora jest jedną z powszechnie używanych rodzin czcionek ze względu na swoją czytelność i warianty.

2. Wyświetlacz Playfair

Ta rodzina czcionek zapewnia lepszą czytelność tekstu i nadaje się zarówno do Internetu, jak i do druku.

3. Archiwum

Ta czcionka należy do groteskowej rodziny krojów bezszeryfowych. Ma czysty wygląd odpowiedni do tekstu podstawowego.

4. Roboto

Roboto to jedna z najczęściej używanych czcionek we współczesnym Internecie. Wygląda świetnie przy minimalnych projektach internetowych i zapewnia doskonałą czytelność dla użytkowników.

5. Montserrat

Montserrat ma korzenie w typografii miejskiej XX wieku. Kolejna bardzo popularna rodzina czcionek, która występuje w wielu wariantach.

6. Rubik

Bardzo przejrzysta, Rubik to rodzina czcionek bezszeryfowych, która obsługuje ponad 470 000 stron internetowych na całym świecie.

7. Źródło Sans

Musisz użyć rodziny czcionek Source Sans, ponieważ ma ona ponad 4,18 miliarda iteracji za pośrednictwem interfejsu Google Fonts API.

8. Lato

Lato jest również krojem pisma Sans Serif i jest uważane przez webmasterów za profesjonalną i przejrzystą czcionkę. Jest używany w prawie każdej pozycji treści.

9. PT Szeryf

Z ponad milionem witryn korzystających z tej czcionki, PT Serif jest jedną z najczęściej używanych czcionek Google. Nadaje się zarówno do dokumentów internetowych, jak i drukowanych.

10. Otwórz Sans

Czcionka Open Sans jest najbardziej zbliżona do ludzkiego pisma, co ułatwia czytanie zarówno w Internecie, jak i na papierze. Interfejs Google Fonts API obsłużył tę czcionkę ponad 28,5 miliarda razy w ciągu zaledwie tygodnia!

Dostępnych jest wiele innych czcionek Google dla witryn WordPress. Bądź mądry przy wyborze rodziny czcionek, ponieważ może to mieć zarówno pozytywny, jak i negatywny wpływ na czytelnictwo Twojej witryny.

5- Najlepsze praktyki korzystania z czcionek Google na stronie internetowej

Integracja czcionek Google WordPress nie jest nauką rakietową, ale zawsze istnieją dwa sposoby wykonania każdego zadania – dobry sposób i najlepszy sposób.

Sprawdźmy najlepsze praktyki związane z używaniem czcionek Google w WordPress.

– Ogranicz grubości czcionek: Wybór pełnego zestawu grubości czcionek jest kuszący, ale ma swoje wady. Dla każdego wariantu API staje się cięższe i zajmuje więcej czasu, aby załadować pełny zestaw grubości czcionek.

Jest to zwykle ładowane na początku strony internetowej, a jeśli nie jest zoptymalizowane, może spowolnić początkowy czas ładowania strony internetowej.

- Hostuj czcionki lokalnie: Czcionka Google to biblioteka internetowa, która jest hostowana gdzie indziej. Chociaż ma to minimalny wpływ na wydajność Twojej witryny, jednak w przypadku niedostępności nadal będziesz mógł serwerować wybrane czcionki Google, jeśli są hostowane lokalnie.

-Dostępność jest ważna: Optymalizacja witryny pod kątem osób z wadami wzroku nie jest już opcją. Czcionki Google umożliwiają stylizację czcionki w sposób, który jest najwygodniejszy dla tego typu odwiedzających.

Użyj kontrastu, który jest czytelny na większości rozmiarów i typów ekranów i nie obciąża wzroku czytelnika. Używanie bardzo jasnych kolorów lub bardzo jasnych kolorów nie jest idealne. Wybierz kolor i rozmiar najlepiej odpowiadający większości czytelników.

Wniosek

Korzystanie z Google Fonts w WordPressie może pomóc w szybkiej zmianie wyglądu i stylu Twojej witryny. Czy starasz się iść do profesjonalnego wyglądające strony lub jednej zabawy, są szanse Google Fonts ma idealne czcionki dla Ciebie.

Pokazaliśmy Ci, jak ręcznie dodać czcionki Google do swojej witryny za pomocą funkcji wp_enqueue_style() i wtyczki Easy Google Fonts. Mam nadzieję, że jesteś teraz w dobrej sytuacji, aby samemu posunąć się do przodu.

Czy kiedykolwiek korzystałeś z biblioteki czcionek na swojej stronie WordPress? Chcielibyśmy usłyszeć od Ciebie, więc daj nam znać, komentując poniżej!