3 różne sposoby dodawania niestandardowych czcionek do motywu witryny WordPress

Istnieje wiele interesujących i konfigurowalnych sposobów, dzięki którym Twoja witryna WordPress będzie wyglądać bardziej niepowtarzalnie i atrakcyjnie wizualnie. Jednym ze sposobów jest dodanie niestandardowych czcionek do witryny WordPress. Przyjrzyj się niektórym witrynom konkurencji. Mogą naśladować ten sam ton i styl, który masz nadzieję stworzyć za pomocą własnej witryny WordPress. Zwróć uwagę na użycie czcionek. Wiele witryn odnoszących sukcesy używa zwykle kilku starannie dobranych czcionek, które są konsekwentnie używane w całej witrynie.

Jest tak wiele niestandardowych czcionek dostępnych online za darmo, które możesz łatwo dodać do własnej witryny. Po znalezieniu odpowiednich czcionek musisz wiedzieć, jak zastosować je w swojej witrynie. Istnieje szereg metod, które możesz wypróbować, aby to osiągnąć.

Po pierwsze, znalezienie odpowiedniej czcionki; istnieje niezliczona ilość witryn oferujących tysiące darmowych czcionek do pobrania. Wypróbuj Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com.

Krótko mówiąc, istnieją dwa główne sposoby dodawania niestandardowych czcionek do witryny WordPress: ręcznie lub za pomocą wtyczek.

Ręcznie dodaj niestandardowe czcionki do motywu witryny WordPress

Ręczne dodawanie niestandardowych czcionek do WordPress może być korzystne, jeśli nie chcesz ryzykować przeciążenia witryny WordPress zbyt wieloma wtyczkami. Można to osiągnąć poprzez edycję dyrektywy @font-face. Pozwala to na podłączenie wielu czcionek dowolnego formatu do Twojej witryny.

Obejmuje to następujące kroki:

Krok 1

Najpierw pobierz wybrane niestandardowe czcionki z dowolnej witryny, która okazała się najbardziej przydatna. Po zapisaniu pliku na komputerze rozpakuj to archiwum .zip.

Krok 2

Następnie możesz przesłać ten plik czcionki na swój serwer hostingowy WordPress w katalogu „wp-content/themes/your-theme-folder/fonts”. Jeśli jeszcze nie skonfigurowałeś wyznaczonego folderu dla niestandardowych czcionek, utwórz go i zapisz w nim.

Krok 3

Następnie przejdź do obszaru administracyjnego WordPress. Wybierz Wygląd, a następnie przejdź do Edytora motywów. W tym momencie zobaczysz plik style.css motywu na ekranie. Pod tym będziesz musiał dodać tę sekcję kodu:

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

Pamiętaj, aby zastąpić „URL” i „font-family” w kodzie odpowiednimi wartościami odpowiadającymi wybranej czcionce. Powinieneś również wkleić tę sekcję kodu na początku pliku CSS, ale po komentarzu motywu.

Krok 4

Na koniec upewnij się, że kliknąłeś ten ważny przycisk Aktualizuj plik. Dzięki temu Twoje zmiany zostaną odpowiednio zapisane przed opuszczeniem strony.

Krok 5

Następnie możesz łatwo użyć czcionki w dowolnym miejscu, w którym chcesz ją zastosować w arkuszu stylów motywu. Używając następującego kodu:

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Teraz, gdy edytowałeś ten kod czcionki, za każdym razem, gdy ktoś wejdzie na twoją stronę, czcionka zostanie załadowana. Ale nie zastosowałeś go jeszcze do żadnego konkretnego elementu na stronie. Aby to zrobić, musisz dokonać jeszcze jednej ostatecznej edycji odpowiedniego pliku style.css, do którego właśnie otwierałeś. Będziesz musiał wprowadzić kod podobny do następującego do pliku:

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Polecane dla Ciebie: Przewodnik dla początkujących: Jak zainstalować motyw WordPress?

Krótka notatka:

Pamiętaj, tak jak poprzednio, aby edytować wartość rodziny czcionek, aby była odpowiednia dla używanej czcionki.

Jeśli na przykład używasz niestandardowych krojów czcionek z Google Fonts, zobaczysz kartę o nazwie @import, która zapewnia odpowiedni kod do skopiowania i wklejenia do pliku style.css motywu. Może to znacznie uprościć cały proces, jeśli nie czujesz się komfortowo ze zbyt dużą ilością kodowania.

Jednak nie jest to już wysoce zalecana metoda. Napotkał pewne problemy z wydajnością, uniemożliwiając przeglądarkom jednoczesne pobieranie wielu arkuszy stylów. Powoduje to ostatecznie wolniejsze ładowanie stron. Miej to na uwadze, wybierając czcionki i metody ich używania.

Z drugiej strony ręczna instalacja niestandardowych czcionek za pomocą CSS umożliwia łączenie czcionek z różnych formatów, w tym SVG, WOFF, TTF i OTF. Ta metoda pozwala również na pracę bez konieczności polegania na usługach firm trzecich. Twoje pliki czcionek będą znajdować się na twoim serwerze. Jest to najbardziej bezpośredni sposób dodawania niestandardowych czcionek do WordPress.

Użyj wtyczek, aby dodać niestandardowe czcionki do motywu witryny WordPress

Wiele osób decyduje się na używanie wtyczek do dołączania niestandardowych czcionek do swoich witryn WordPress, ponieważ pod wieloma względami może to być najprostsza metoda. Jest to szczególnie prawdziwe, jeśli nie chcesz zajmować się kodowaniem CSS. Czcionki Google to popularny wybór, głównie dlatego, że można ich łatwo używać w połączeniu z wtyczką WordPress. Dwie najlepsze opcje dla Ciebie to Łatwe czcionki Google i Typografia czcionek Google. Po aktywowaniu dowolnej z tych wtyczek będziesz mieć łatwy dostęp do całego katalogu czcionek Google Fonts, które możesz dodać do swoich stron bez konieczności zajmowania się skomplikowanym kodem.

Korzystanie z czcionek Google to najprostszy sposób, aby to zrobić, i możesz wyświetlać podgląd zmian i niestandardowych czcionek w czasie rzeczywistym na ekranie.

W zależności od tego, jakich plików czcionek chcesz użyć i czy zamierzasz używać jednego repozytorium, czy nie, możesz rozważyć użycie alternatywnej wtyczki, takiej jak wtyczka Custom Fonts.

Krok 1

Po zainstalowaniu wybranej wtyczki i aktywowaniu jej przejdź do Wyglądu, a następnie kliknij stronę Dostosuj, która otworzy stronę interfejsu dostosowywania motywu WordPress na żywo. Tutaj zobaczysz kartę Typografia, która pokaże Ci każdą sekcję Twojej własnej witryny, do której możesz zastosować własne niestandardowe czcionki.

Krok 2

Po otwarciu tej strony będziesz mógł kliknąć przycisk Edytuj czcionkę w sekcji strony, którą chcesz rozpocząć edycję. Następnie możesz przeglądać różne podsekcje, wybierając styl czcionki, rozmiar, margines itp. – te sekcje będą się różnić w zależności od używanego motywu.

Twój motyw może również oznaczać, że nie będziesz mógł bezpośrednio edytować wybranych czcionek dla różnych sekcji witryny. Istnieje jednak proste rozwiązanie tego problemu: po prostu przejdź do Ustawień, a następnie Czcionek Google, gdzie możesz tworzyć własne kontrolki czcionek. Aby to zrobić, po prostu wpisz nazwę kontrolki w polu i wybierz selektory CSS. Pozwala to na dodanie dowolnych elementów HTML, na które chcesz kierować tę czcionkę. Po wprowadzeniu tych informacji pamiętaj o zapisaniu zmian, klikając przycisk Zapisz kontrolę czcionek, aby ustawienia zostały w pełni zaktualizowane. Następnie możesz kontynuować tworzenie tylu niestandardowych formantów czcionek, ile będziesz potrzebować dla każdej innej sekcji swojej witryny WordPress.

Krok 3

Aby użyć tych nowych kontrolerów czcionek po ich utworzeniu, po prostu wróć do sekcji Wygląd, kliknij Dostosowywanie, a następnie kliknij kartę Typografia. Następnie zobaczysz opcję oznaczoną Typografia motywu – po kliknięciu na nią będziesz mieć dostęp do niestandardowych elementów sterujących czcionkami, po prostu wybierając przycisk Edytuj, aby wybrać żądane czcionki i wygląd, jaki chcesz dla tego konkretnego kontrola. Jeszcze raz nie zapomnij zapisać zmian, klikając przycisk Publikuj lub Zapisz, aby zaktualizować witrynę.

Krótka notatka:

Niektóre inne świetne niestandardowe wtyczki czcionek WordPress, które polecamy, to Custom Font Uploader i Use Any Font – ale istnieje niezliczona ilość innych do wyboru, więc zapoznaj się z opcjami, zanim zdecydujesz się na tę, której chcesz użyć.

Może ci się spodobać również: 20 najlepiej sprzedających się mikroniszowych motywów WordPress.

Na koniec spróbuj użyć motywów

Oprócz tych dwóch głównych metod dodawania niestandardowej czcionki i typografii do witryny WordPress, możesz także skorzystać z motywów, z których możesz wybierać. Dostępnych jest wiele motywów, z których wiele ma wbudowane opcje umożliwiające dostosowanie zainstalowanych czcionek. Proces ten będzie się różnić w zależności od używanego motywu. Pamiętaj więc, aby wyszukać odpowiedni przewodnik pasujący do Twojego motywu. Wysokiej jakości, premium motywy WordPress będą również oferować dokumenty dostępne do uzyskania dostępu online, które zawierają wskazówki dotyczące dodawania niestandardowych czcionek do tego konkretnego motywu.

Elementy wizualne i projektowe są prawdopodobnie jednym z najważniejszych czynników tworzenia skutecznej strony internetowej, która przyciągnie uwagę każdej osoby, która ją odwiedzi. Jedną z największych funkcji w tej sferze jest użycie czcionek. Niezależnie od tego, w jaki sposób wybierzesz niestandardowe czcionki do swojej witryny WordPress, powinieneś znajdować i używać czcionek najbardziej odpowiednich dla stylu, odbiorców, treści, motywu i tonu całej witryny i marki.

 Ten artykuł został napisany przez Beatrice Beard. Beatrice jest profesjonalną copywriterką w Academic Brits, która specjalizuje się w imponującym zakresie tematów i dziedzin. Beatrice jest zawsze otwarta na dzielenie się osobistymi doświadczeniami i udzielanie porad początkującym pisarzom, odkrywając wszystkie wyzwania i osobliwości związane z tworzeniem wysokiej jakości treści, które naprawdę się sprzedają.