Jak dodać niestandardowe czcionki do WordPressa?

Nauka dostosowywania typografii witryny jest dość podstawowym aspektem tworzenia i prowadzenia witryny. Może zmienić cały styl witryny i mieć duży wpływ na to, jak odwiedzający wchodzą w interakcję z klientami.

Dlatego konieczne jest, aby wiedzieć, jak dodawać niestandardowe czcionki do WordPressa. Wybór odpowiedniej czcionki tworzy wyraźny wygląd Twojej witryny, pozwala budować markę wizualną oraz zwiększa czytelność i zaangażowanie odwiedzających.

W Internecie dostępnych jest tysiące czcionek, z których można korzystać, a wiele z nich jest bezpłatne. W tym artykule omówimy dodawanie czcionek z dwóch najpopularniejszych baz danych czcionek internetowych do Twojej witryny — Google Fonts i Adobe Fonts, znanych również jako czcionki Typekit. Te biblioteki czcionek zawierają tysiące czcionek internetowych, które można pobrać.

Oprócz nich w Internecie znajduje się niezliczona ilość innych bibliotek czcionek io nich też porozmawiamy.

Oto sposoby dodania tych niestandardowych czcionek do swojej witryny:

Jak dodać niestandardowe czcionki do WordPressa

1. Dodaj czcionki Google za pomocą wtyczki

Jeśli planujesz używać czcionek Google do stylizowania treści witryny WordPress, istnieje przydatne narzędzie, które bezpośrednio łączy program dostosowywania WordPressa z bazą danych czcionek Google. Easy Google Fonts jest bezpłatny i umożliwia korzystanie z Google Fonts bez konieczności pracy z dowolnym kodem.

1. W przypadku tej metody najpierw zainstaluj wtyczkę Easy Google Fonts. Po skonfigurowaniu wtyczki znajdziesz nową opcję o nazwie „Typografia” w dostosowywaniu WordPress (Wygląd > Dostosuj).

2. Po przejściu do opcji Typografia znajdziesz różne domyślne sekcje treści lub kontrolki czcionek, które możesz dostosować. Możesz znaleźć ustawienia czcionki dla tej konkretnej grupy, klikając „Edytuj czcionkę”.

Ustawienia czcionki są dość obszerne i pozwalają dostosować praktycznie każdy aspekt tekstu, aby stworzyć pożądany styl czcionki, taki jak rozmiar czcionki i nie tylko. Możesz zmienić czcionkę dla tej konkretnej kategorii tekstu w opcji Rodzina czcionek na karcie Style.

Na karcie Wygląd można znaleźć inne popularne opcje, takie jak kolor czcionki, rozmiar czcionki i wysokość linii.

Na karcie Pozycjonowanie znajduje się kilka szczegółowych kontrolek wizualnych, takich jak Margines, Padding i Border.

3. Teraz Twoja witryna może również wymagać szczególnej uwagi w odniesieniu do niektórych kategorii tekstu, które mogą nie być obsługiwane przez domyślne ustawienia czcionek zapewniane przez tę wtyczkę. Może po prostu chcesz mieć te same ustawienia typografii dla wszystkich nagłówków i chcesz, aby jedna kategoria kontrolowała je wszystkie. Możesz tworzyć niestandardowe kontrolki czcionek , przechodząc do Ustawienia > Czcionki Google.

4. Przejdź do zakładki Zarządzaj ustawieniami czcionek i kliknij „Utwórz kontrolę czcionek”.

5. Zostaniesz poproszony o dostarczenie selektorów CSS w celu zdefiniowania tej konkretnej kategorii. Następnie kliknij „Bezpieczna kontrola czcionek”, aby utworzyć nową kategorię/kontrolę czcionek.

6. Niestandardowe kontrolki czcionek można znaleźć w innej lokalizacji niż domyślne. Wróć do WordPress Customizer i kliknij opcję Typografia. Przekonasz się, że istnieją dwie kategorie — Typografia domyślna i Typografia tematyczna. Niestandardowe kontrolki czcionek można znaleźć w opcji Typografia motywu.

2. Dodaj czcionki Google za pomocą kodu

1. Jeśli chcesz dodać czcionki Google do WordPress bez wtyczki, możesz dodać kod do plików motywów. Możesz stworzyć motyw potomny, aby móc cofnąć zmiany, jeśli ci się nie podobają.

2. Przejdź do witryny Google Fonts i znajdź czcionkę, którą lubisz. Na stronie czcionki znajdziesz różne style każdej czcionki. Kliknij przycisk „Wybierz ten styl” dla żądanego stylu. Wybrana czcionka zostanie zapisana do użytku w specjalnej sekcji. W prawym górnym rogu strony znajduje się przycisk do przeglądania wybranych czcionek. Otwiera pasek boczny z dwiema zakładkami. Kliknij kartę „Umieść”.

3. Skopiuj ten link do osadzenia i wklej go w pliku header.php, tuż przed tagiem <body>.

4. Jeśli nie chcesz zajmować się problemami związanymi z pracą z plikami motywów, istnieje przydatna wtyczka o nazwie Wstaw nagłówki i stopki, która z łatwością dodaje kod do plików motywów. Możesz użyć tej wtyczki poprzez jej własną sekcję na pasku ustawień zatytułowaną „Wstaw nagłówki i stopki”. Po prostu wklej kod w polu „Skrypty w nagłówku”.

3. Dodaj czcionki Adobe TypeKit do WordPress

Adobe ma kolejną imponującą bibliotekę niestandardowych czcionek z bezpłatną wersją i płatną. Zanim zaczniesz używać ich czcionek, potrzebujesz konta w witrynie Adobe Fonts. Przeglądanie dostępnych czcionek można rozpocząć na stronie Przeglądaj czcionki .

1. Po zalogowaniu się na stronie możesz używać czcionek, które lubisz, klikając przycisk </>.

2. Aby uzyskać link do osadzenia, musisz utworzyć projekt internetowy w Adobe Fonts i dodać wybraną czcionkę do projektu.

3. Podobnie jak w przypadku Google Fonts, musisz wkleić ten link do embed do pliku header.php motywu przed tagiem <body>.

4. Możesz uniknąć bezpośredniej pracy z plikami motywów za pomocą wtyczki Wstaw nagłówki i stopki. Po prostu przejdź do opcji Wstaw nagłówki i stopki na pasku Ustawienia i wklej kod osadzania w polu „Skrypty w nagłówku”. Spowoduje to zaimportowanie wybranych czcionek TypeKit.

Niektóre inne biblioteki czcionek niestandardowych

Chociaż Google Fonts i Adobe Fonts to jedne z najpopularniejszych baz danych dla czcionek internetowych. Istnieje jednak wiele innych bibliotek czcionek, które możesz zbadać, aby pobrać odpowiednie czcionki do swojej witryny WordPress. Oto kilka, które możesz odkryć:

1. Szablon potwora
2. Czcionka wiewiórka
3. Fontspring
4. 1001 darmowych czcionek
5. Czcionka dziwaczka
6. Abstrakcyjne czcionki
7. Moje Czcionki

Jak dodać inne niestandardowe czcionki za pomocą wtyczki?

Istnieje przydatna wtyczka o nazwie Użyj dowolnej czcionki, która pozwala pominąć kłopoty z ręcznym dodawaniem niestandardowych czcionek. Zapewnia prosty interfejs, za pomocą którego możesz dodawać nowe czcionki bezpośrednio z pulpitu nawigacyjnego i przypisywać niestandardowe czcionki do żądanych elementów.

Jak ręcznie dodać inne niestandardowe czcionki?

Jeśli chcesz dodać żądane czcionki ręcznie, musisz przesłać plik czcionki do katalogu WordPress. Użyj do tego motywu potomnego, aby zbudować warstwę bezpieczeństwa na wypadek, gdyby nowy wygląd Ci się nie podobał lub niechciane zmiany spowodują błędy w Twojej witrynie. Motyw potomny pozwoli Ci łatwo cofnąć zmiany.

Pobierz żądaną czcionkę z dowolnej biblioteki czcionek, takiej jak TemplateMonster. Następnie przejdź do wp-content/themes/your-theme/fonts i prześlij go do folderu Fonts za pomocą klienta FTP. Jeśli nie ma folderu Czcionki, utwórz go.

Po przesłaniu pliku czcionki musisz zaimportować czcionkę za pomocą arkusza stylów. Dodaj następujący kod do pliku style.css :

@font-face {

rodzina czcionek: czcionka niestandardowa;

źródło: url(http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

grubość czcionki: normalna;

}

Musisz zastąpić rodzinę czcionek nazwą czcionki, którą chcesz zaimportować, a adres URL adresem URL Twojej witryny.

Wniosek

Wykonując powyższe kroki, możesz łatwo dodać niestandardowe czcionki do swojej witryny WordPress przy minimalnym wysiłku. Istnieją tysiące czcionek internetowych, których można używać tylko z baz danych Google Fonts i Adobe Fonts. Dzięki odpowiedniemu doborowi niestandardowych czcionek Twoja witryna może zyskać inny urok, lepiej angażować odwiedzających i tworzyć lepszą estetykę, odpowiednią do Twojego tematu.