Jak dodać niestandardowe czcionki WordPress (i wybrać czcionki, które są w parze)

Szukasz sposobu na dodanie własnych niestandardowych czcionek WordPress do swojej witryny?

Twój motyw WordPress prawdopodobnie zawiera własny zestaw czcionek do wyboru, ale opcje mogą być dość ograniczone, więc jest całkowicie zrozumiałe, że zamiast tego chcesz dodać własne czcionki WordPress.

W tym poście dowiesz się, jak przesłać i używać dowolnej czcionki w WordPressie za pomocą kilku różnych metod.

Jeśli nie jesteś zaznajomiony z ideą korzystania z własnych czcionek WordPress, zaczniemy od krótkiego wprowadzenia na temat tego, gdzie znaleźć niestandardowe czcionki i jak je sparować.

Następnie pokażemy, jak dodać niestandardowe czcionki WordPress z:

• Czcionki Google
• Czcionki Adobe (Typekit)
• Dosłownie nigdzie indziej! (przesyłając plik czcionki i używając CSS3 @font-face)

Kliknij ten link, aby przejść bezpośrednio do samouczków.

Gdzie znaleźć niestandardowe czcionki dla WordPressa

Najbardziej znanym miejscem, w którym można znaleźć niestandardowe czcionki WordPress, są zdecydowanie czcionki Google. W Google Fonts znajdziesz repozytorium ponad 900 czcionek, z których wszystkie są bezpłatne i bardzo łatwe do zintegrowania z Twoją witryną WordPress dzięki CDN Google.

Po Google Fonts kolejną dobrze znaną opcją jest Adobe Fonts ( wcześniej nazywany Typekit ). Czcionki Adobe Fonts są dostępne bez dodatkowych kosztów w ramach subskrypcji Adobe Creative Cloud, ale nie są dostępne dla osób bez subskrypcji.

Wreszcie, możesz znaleźć wiele innych witryn, które agregują czcionki bezpłatne i premium. Dwa z naszych ulubionych to:

• Font Squirrel – zbiera czcionki, które są w 100% darmowe do użytku komercyjnego.
• Fonts.com – ma dużą kolekcję czcionek premium.

Jak sparować czcionki, aby Twoja witryna wyglądała świetnie?

Zazwyczaj w witrynie WordPress nie używasz ani jednej czcionki. Zamiast tego większość witryn używa par czcionek, aby stworzyć ciekawszy projekt i pomóc zróżnicować treść.

Jednak nie chcesz po prostu losowo rzucać dwóch czcionek razem – to może nie wyglądać zbyt gorąco.

Zamiast tego potrzebujesz dwóch współpracujących ze sobą czcionek, co może być trudne do rozszyfrowania, jeśli nie jesteś projektantem .

Aby pomóc, istnieje wiele świetnych witryn, które zasugerują Ci pary czcionek. Na przykład, jeśli znajdziesz czcionkę, którą absolutnie lubisz , możesz skorzystać z jednej z tych witryn, aby znaleźć dla niej parę. Niektóre z naszych ulubionych to:

• CzcionkaPara
• Fontjoy
• Typ.io

Chociaż nie ma reguły mówiącej, że można używać tylko dwóch czcionek, należy uważać na używanie zbyt wielu czcionek WordPress. Poza możliwością tworzenia chaotycznego projektu, używanie zbyt wielu niestandardowych czcionek może również spowolnić czas ładowania witryny.

Jak dodać niestandardowe czcionki WordPress: przewodniki krok po kroku

A teraz zabawna część — oto jak zacząć używać własnych niestandardowych czcionek WordPress.

Istnieje kilka tras, którymi możesz się tu udać, w zależności od tego, skąd chcesz czerpać czcionki.

Oto trzy metody, które omówimy. Ponownie możesz kliknąć link, aby przejść bezpośrednio do konkretnego samouczka:

1. Dodaj czcionki Google w WordPress (wtyczka, instrukcja lub lokalne metody hostingu)
2. Dodaj czcionki Adobe (Typekit) w WordPress
3. Użyj CSS3 @font-face, aby przesłać i dodać dowolną czcionkę w WordPress

Jak dodać czcionki Google do WordPress

Ponieważ Czcionki Google są najpopularniejszym źródłem niestandardowych czcionek WordPress, omówimy trzy różne sposoby dodawania czcionek Google do WordPress:

1. Dodaj czcionki Google z CDN Google za pomocą wtyczki
2. Ręczne dodawanie czcionek Google z CDN Google
3. Hostuj czcionki Google lokalnie w WordPressie za pomocą wtyczki

Jak dodać czcionki Google do WordPressa za pomocą wtyczki?

Ze względu na popularność Google Fonts można znaleźć kilka wysokiej jakości wtyczek, które bardzo ułatwiają dodawanie czcionek Google do WordPressa, a naszą ulubioną jest Easy Google Fonts, ponieważ:

• Bezpłatny
• Lekki
• Łatwy w użyciu

Po zainstalowaniu i aktywacji wtyczki przejdź do Wygląd → Dostosuj na pulpicie nawigacyjnym WordPress, aby uruchomić narzędzie WordPress Customizer w czasie rzeczywistym.

Następnie kliknij opcję Typografia , aby wybrać opcje czcionek Google:

Stamtąd możesz użyć opcji, aby wybrać niestandardową czcionkę dla każdego elementu w swojej witrynie:

Na przykład, tak wygląda zmiana czcionki akapitu:

Oprócz wyboru samej czcionki wtyczka umożliwia również dostosowanie:

• Grubość czcionki
• Dekoracja tekstu
• Zabarwienie

Jeśli znasz się na małym CSS, możesz również użyć funkcji Font Controls wtyczki, aby pogrupować pewne elementy. Na przykład możesz połączyć selektory nagłówków, aby kierować reklamy na wszystkie nagłówki jednocześnie.

Aby to ustawić, przejdź do Ustawienia → Czcionki Google i utwórz nową kontrolę czcionek, aby kierować określone selektory CSS:

Jak dodać czcionki Google do WordPressa bez wtyczki?

Ponieważ Google obsługuje wszystkie swoje czcionki we własnym CDN, dość łatwo jest również ręcznie dodać czcionki Google do WordPressa.

Zasadniczo, zamiast przesyłać pliki czcionek na swój serwer, możesz po prostu połączyć się z hostowanym przez Google CDN, a Google zajmie się obsługą czcionek za Ciebie.

Niektórzy ludzie nie lubią tego robić ze względu na wydajność — w następnej sekcji przedstawię sposób lokalnego hostowania czcionek Google, jeśli chcesz .

Aby rozpocząć, musisz skorzystać z witryny Google Fonts, aby wybrać czcionkę, którą chcesz dodać.

W tym przykładzie załóżmy, że chcesz użyć Roboto .

Przejdź do strony czcionki i kliknij + Wybierz tę czcionkę :

Spowoduje to dodanie okna w prawym dolnym rogu. Kliknij, aby rozwinąć to okno.

Jeśli chcesz wybrać dodatkowe grubości czcionki ( np. dla pogrubienia i kursywy ), możesz przejść do zakładki Dostosuj . Aby zachować równowagę między użytecznością a wydajnością, zalecamy wybór trzech grubości czcionki na absolutnym maksimum :

• Regularny
• italski
• Pogrubiony

Możesz nawet użyć mniej, jeśli chcesz uzyskać najlepszą wydajność .

Po dokonaniu wyboru wróć do karty Osadź i skopiuj kod Osadź czcionkę :

Następnie musisz dodać ten kod do sekcji <head> swojego motywu WordPress. Możesz to zrobić poprzez:

• Bezpośrednia edycja pliku header.php motywu potomnego ( upewnij się, że używasz motywu potomnego – w przeciwnym razie Twoje niestandardowe czcionki znikną po zaktualizowaniu motywu )
• Korzystanie z bezpłatnej wtyczki, takiej jak Wstaw nagłówki i stopki

Po dodaniu kodu możesz zacząć używać czcionek Google w swoim CSS.

Jeśli wrócisz do witryny Google Fonts, Google faktycznie poinformuje Cię o regułach CSS, których musisz użyć:

Na przykład, aby Twoje tagi h2 używały nowej czcionki Roboto, możesz przejść do Wygląd → Dostosuj → Dodatkowy CSS i dodać następujący fragment:

godz.2 {

rodzina czcionek: „Roboto”, bezszeryfowa;

}

Jak hostować czcionki Google lokalnie w WordPressie za pomocą wtyczki?

Oto ostateczna metoda korzystania z czcionek Google!

Niektórzy wolą hostować czcionki Google lokalnie, zamiast ładować je z CDN Google. Oznacza to, że zamiast ładować je z linku takiego jak „https://fonts.googleapis.com/css?family=Roboto:400,700”, możesz hostować pliki na własnym serwerze.

Najłatwiej to zrobić za pomocą darmowej wtyczki o nazwie CAOS for Webfonts.

Po zainstalowaniu i aktywacji wtyczki możesz przejść do Ustawienia → Optymalizuj czcionki internetowe, aby wybrać czcionki, które chcesz pobrać na swój serwer:

Gdy to zrobisz, możesz zacząć używać czcionek w swoim CSS ( tak jakbyś postępował zgodnie z poprzednią metodą ).

Jak dodać czcionki Adobe (Typekit) w WordPress

Jeśli chcesz używać czcionek Adobe Fonts w WordPress, możesz zasadniczo wykonać te same czynności, co w przypadku ręcznej metody Google Fonts. Pamiętaj, że usługa Adobe Fonts jest dostępna tylko w ramach subskrypcji Creative Cloud .

Aby rozpocząć, musisz skorzystać z witryny Adobe Fonts, aby wybrać czcionki i utworzyć projekt internetowy ( szczegółowe instrukcje znajdują się tutaj ).

W oknie Dodaj czcionki do projektu Web Project możesz wybrać czcionki, które chcesz uwzględnić:

Następnie Adobe poda kod do osadzenia, podobnie jak Google Fonts:

Weź ten kod osadzania i dodaj go do swojej witryny za pomocą pliku header.php motywu podrzędnego lub wtyczki, takiej jak Wstaw nagłówki i stopki.

Po utworzeniu linku do pliku CSS możesz użyć CSS udostępnionego przez firmę Adobe, aby rozpocząć stosowanie czcionki do selektorów CSS w swojej witrynie:

Jak korzystać z @font-face w WordPressie

Wreszcie ostatnią metodą, którą pokażemy, jest użycie @font-face w WordPressie. Zaletą tej metody jest to, że będzie działać z dosłownie każdym plikiem czcionki z dowolnego źródła .

Zasadniczo, o ile możesz pobrać plik czcionki i masz prawa do jego używania, CSS3 @font-face zrobi to.

Aby rozpocząć, pobierz plik czcionki z preferowanego źródła. W tym przykładzie użyjemy darmowej czcionki Font Squirrel o nazwie Alex Brush .

Jeśli to możliwe, spróbuj pobrać plik w formacie .woff lub .woff2 , aby uzyskać najlepszą kompatybilność z różnymi przeglądarkami. Jeśli nie jest to możliwe, możesz pobrać czcionkę w innym formacie, a następnie użyć bezpłatnego narzędzia FontSquirrel Webfont Generator, aby przekonwertować ją na .woff :

Następnie połącz się z serwerem witryny WordPress przez FTP lub cPanel File Manager. Następnie…

• Utwórz nowy folder o nazwie fonts wewnątrz aktywnego motywu lub katalogu motywu podrzędnego ( niektóre motywy mogą już mieć folder czcionek . W takim przypadku możesz to pominąć ).
• Prześlij plik czcionki do folderu czcionek . Możesz przesłać oba formaty .woff i .woff2

Po przesłaniu plików przejdź do Wygląd → Dostosuj → Dodatkowe CSS w panelu WordPress.

Najpierw musisz użyć @font-face, aby dodać czcionkę…

Aby to zrobić, wpisz nazwę czcionki jako rodzinę czcionek i dodaj bezpośredni adres URL do pliku czcionki na serwerze jako adres URL . Oto jak to wygląda w naszym przykładzie AlexBrush:

@font-face {

rodzina czcionek: AlexBrush;

src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

grubość czcionki: normalna;

}

Gdy to zrobisz, możesz użyć CSS, aby zastosować swoją rodzinę czcionek ( pod nazwą, którą zarejestrowałeś w @font-face ). Na przykład, oto jak wygląda użycie czcionki AlexBrush dla nagłówków <h2>:

I to wszystko! Możesz użyć tej metody CSS3 @font-face dla dosłownie każdego pliku czcionki.

Ostatnie przemyślenia na temat niestandardowych czcionek WordPress

Jeśli Twój motyw WordPress nie zawiera czcionek, których chcesz użyć, nie panikuj! Masz wiele opcji dodawania własnych niestandardowych czcionek WordPress.

Najłatwiejszym sposobem na rozpoczęcie jest skorzystanie z hostowanych bezpłatnych czcionek w Google Fonts lub hostowanych opcji premium w Adobe Fonts.

Jednak w żadnym wypadku nie jesteś ograniczony do tych usług, a używając CSS3 @font-face, możesz przesłać dosłownie dowolny plik czcionki do WordPressa i zacząć go używać w swoim motywie.

Teraz wyjdź i stwórz własną parę czcionek!