Jak dodać niestandardowe czcionki w WordPress

Czy chcesz dodać niestandardowe czcionki w WordPress? Czcionki niestandardowe pozwalają na użycie pięknej kombinacji różnych czcionek na swojej stronie internetowej, aby poprawić typografię i wrażenia użytkownika.

Oprócz dobrego wyglądu, niestandardowe czcionki mogą również pomóc poprawić czytelność, stworzyć wizerunek marki i zwiększyć czas spędzany przez użytkowników na twojej stronie.

W tym artykule pokażemy, jak dodawać niestandardowe czcionki w WordPress za pomocą Google Fonts, TypeKit i metody CSS3 @Font-Face.

Uwaga: Załadowanie zbyt wielu czcionek może spowolnić Twoją stronę. Zalecamy wybór dwóch czcionek i używanie ich w całej witrynie. Pokażemy Ci również, jak prawidłowo je załadować, nie spowalniając witryny.

Zanim przyjrzymy się, jak dodawać niestandardowe czcionki w WordPress, rzućmy okiem na znalezienie niestandardowych czcionek, których możesz użyć.

Jak znaleźć niestandardowe czcionki do użycia w WordPress

Czcionki były kiedyś drogie, ale już nie. Istnieje wiele miejsc, w których można znaleźć świetne darmowe czcionki internetowe, takie jak Google Fonts, Typekit, FontSquirrel i fonts.com.

Jeśli nie wiesz, jak mieszać i dopasowywać czcionki, spróbuj sparować czcionki. Pomaga projektantom łączyć piękne czcionki Google.

Podczas wybierania czcionek pamiętaj, że używanie zbyt wielu niestandardowych czcionek spowolni Twoją witrynę. Dlatego należy Wybrać dwie czcionki i używać ich w całym projekcie. Zapewni to również spójność projektu.

Video Tutorial

Jeśli nie podoba Ci się film lub wolisz pisemny przewodnik, Kontynuuj czytanie.

Dodawanie niestandardowych czcionek w WordPress z Google Fonts

Google Fonts to największa, darmowa i najczęściej używana biblioteka czcionek wśród twórców stron internetowych. Istnieje wiele sposobów dodawania i używania czcionek Google w WordPress.

Metoda 1: Dodawanie Niestandardowych Czcionek Za Pomocą Łatwej Wtyczki Google Fonts

Jeśli chcesz dodać i używać czcionek Google na swojej stronie internetowej, ta metoda jest zdecydowanie najłatwiejsza i zalecana dla początkujących.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę easy Google Fonts. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do Wygląd ” Customizer strona. Spowoduje to otwarcie interfejsu dostosowywania motywów na żywo, w którym zobaczysz nową sekcję typografii.

Klikając na typografię, pokażesz różne sekcje swojej witryny, w których możesz zastosować Czcionki Google. Po prostu kliknij „Edytuj czcionkę” pod sekcją, którą chcesz edytować.

W sekcji rodzina czcionek możesz wybrać dowolną czcionkę Google, której chcesz użyć w swojej witrynie. Możesz także wybrać styl czcionki, rozmiar czcionki, wypełnienie, margines i inne.

W zależności od motywu liczba sekcji może być ograniczona i możesz nie być w stanie bezpośrednio zmienić wyboru czcionki dla wielu różnych obszarów witryny.

Aby to naprawić, wtyczka pozwala również tworzyć własne kontrolki i używać ich do zmiany czcionek w witrynie.

Po pierwsze, musisz odwiedzić Ustawienia ” Google Fonts strony i podaj nazwę kontrolki czcionek. Użyj czegoś, co pomoże Ci szybko zrozumieć, gdzie będziesz używać tej kontroli czcionek.

Następnie kliknij przycisk „Create font control”, a następnie zostaniesz poproszony o wprowadzenie selektorów CSS.

Możesz dodać elementy HTML, które chcesz kierować (na przykład h1, h2, p, blockquote) lub użyć klas CSS.

Możesz użyć narzędzia Inspect w przeglądarce, aby dowiedzieć się, które klasy CSS są używane przez dany obszar, który chcesz zmienić.

Teraz kliknij przycisk „Zapisz kontrolkę czcionki”, aby zapisać ustawienia. Możesz utworzyć tyle kontrolerów czcionek, ile potrzebujesz dla różnych sekcji witryny.

Aby korzystać z tych kontrolerów czcionek, musisz udać się do Wygląd ” Customizer i kliknij na zakładkę Typografia.

W sekcji Typografia zobaczysz teraz również opcję „Typografia motywu”. Kliknięcie na nim spowoduje wyświetlenie niestandardowych formantów czcionek utworzonych wcześniej. Możesz teraz po prostu kliknąć przycisk Edytuj, aby wybrać czcionki i wygląd dla tego sterowania.

Nie zapomnij kliknąć przycisku Zapisz lub opublikuj, aby zapisać zmiany.

Metoda 2: Ręcznie Dodaj czcionki Google w WordPress

Ta metoda wymaga dodania kodu do plików motywów WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem, jak skopiować i wkleić kod w WordPress.

Najpierw odwiedź bibliotekę czcionek Google i wybierz czcionkę, której chcesz użyć. Następnie kliknij przycisk szybkiego użycia pod czcionką.

Na stronie czcionki zobaczysz style dostępne dla tej czcionki. Wybierz Style, których chcesz użyć w projekcie, a następnie kliknij przycisk paska bocznego u góry.

Następnie musisz przełączyć się na kartę „osadzaj” na pasku bocznym, aby skopiować kod osadzania.

Istnieją dwa sposoby dodania tego kodu do witryny WordPress.

Po pierwsze, możesz po prostu edytować nagłówek szablonu.plik php i wklej kod przed < body> tag.

Jeśli jednak nie znasz edycji kodu w WordPress, możesz użyć wtyczki, aby dodać ten kod.

Wystarczy zainstalować i aktywować wtyczkę Wstaw nagłówki i stopki. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Ustawienia ” Wstawianie nagłówków i stopek strona i wklej kod osadzenia w polu „Skrypty w nagłówku”.

Nie zapomnij kliknąć przycisku Zapisz, aby zapisać zmiany. Wtyczka rozpocznie teraz Ładowanie kodu osadzania Czcionki Google na wszystkich stronach witryny.

Możesz użyć tej czcionki w arkuszu stylów motywu w ten sposób:

.H1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat dodawania czcionek Google w motywach WordPress.

Dodawanie niestandardowych czcionek w WordPress za pomocą Typekit

Typekit od Adobe Fonts to kolejny darmowy i premium zasób na niesamowite czcionki, które możesz wykorzystać w swoich projektach projektowych. Mają płatną subskrypcję, a także ograniczony bezpłatny plan, z którego możesz korzystać.

Wystarczy zarejestrować konto Adobe Fonts i odwiedzić sekcję przeglądaj czcionki. Stąd należy kliknąć na </> przycisk, aby wybrać czcionkę i utworzyć projekt.

Następnie zobaczysz kod osadzania z identyfikatorem projektu. Pokaże Ci również, jak używać czcionki w CSS motywu.

Musisz skopiować i wkleić ten kod w sekcji < head> swojej witryny.

Istnieją dwa sposoby dodania tego kodu do witryny WordPress.

Po pierwsze, możesz po prostu edytować nagłówek szablonu.plik php i wklej kod przed < body> tag.

Jeśli jednak nie znasz edycji kodu w WordPress, możesz użyć wtyczki, aby dodać ten kod.

Wystarczy zainstalować i aktywować wtyczkę Wstaw nagłówki i stopki.

Po aktywacji przejdź do Ustawienia ” Wstawianie nagłówków i stopek strona i wklej kod osadzenia w polu „Skrypty w nagłówku”.

To wszystko, możesz teraz użyć czcionki Typekit wybranej w arkuszu stylów motywu WordPress w ten sposób:

h1 .site-title { 
rodzina czcionek: gilbert, sans-serif;
} 

Aby uzyskać bardziej szczegółowe instrukcje, sprawdź nasz samouczek, Jak dodać niesamowitą typografię w WordPress za pomocą Typekit.

Dodawanie niestandardowych czcionek w WordPress za pomocą CSS3 @ font-face

Najbardziej bezpośredni sposób dodawania niestandardowych czcionek w WordPress jest dodanie czcionek za pomocą CSS3 @ font-face metoda. Ta metoda pozwala na użycie dowolnej czcionki, którą lubisz na swojej stronie internetowej.

Pierwszą rzeczą, którą musisz zrobić, to pobrać czcionkę, która Ci się podoba w formacie internetowym. Jeśli nie masz formatu internetowego dla swojej czcionki,możesz ją przekonwertować za pomocą generatora FontSquirrel Webfont.

Gdy masz pliki webfont, musisz przesłać je na swój serwer hostingowy WordPress.

Najlepszym miejscem do przesłania czcionek jest nowy folder „czcionki” w katalogu motywu lub motywu podrzędnego.

Możesz użyć FTP lub menedżera plików cPanel, aby przesłać czcionkę.

Po przesłaniu czcionki należy ją załadować do arkusza stylów motywu za pomocą reguły CSS3 @ font-face w ten sposób:

@ font-face {
	font-family: Arvo;  
	src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	font-weight: normalny;  
}

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

Następnie możesz użyć tej czcionki w dowolnym miejscu arkusza stylów motywu, w ten sposób:

.H1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Ładowanie czcionek bezpośrednio przy użyciu CSS3 @font-face nie zawsze jest najlepszym rozwiązaniem. Jeśli używasz czcionki z Google Fonts lub Typekit, najlepiej jest podawać czcionkę bezpośrednio z serwera, aby uzyskać optymalną wydajność.

To wszystko, mamy nadzieję, że ten artykuł pomógł Ci dodać niestandardowe czcionki w WordPress. Możesz również sprawdzić nasz przewodnik, jak używać czcionek ikon w WordPress i jak zmienić rozmiar czcionki w WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.