Jak dodać niestandardowe czcionki w witrynie WordPress [2022]

Opublikowany: 2022-05-05

Czy wiesz, co jest centralną częścią Twojego projektu internetowego? Dodanie niestandardowej czcionki do witryny WordPress to ostateczny krok, który możesz podjąć, aby zatrzymać odwiedzających witrynę i zwiększyć czytelność witryny. Czcionka, którą wybierzesz dla witryny, reprezentuje wizerunek Twojej marki. Zanurzmy się, aby dowiedzieć się o niestandardowych czcionkach z tajnikami.

custom fonts

Nawet jeśli znajdziesz darmowe czcionki online, ograniczysz się do ich używania w oparciu o kompatybilność motywu. Dlatego wyjaśnimy, jak dodawać niestandardowe czcionki w WordPress za pomocą ręcznych sposobów i wtyczek WordPress.

Po co używać niestandardowych czcionek i gdzie je znaleźć?

Jak wspomniano powyżej, znajdziesz wiele witryn, z których możesz łatwo pobrać czcionki. Na przykład Font Squirrel zawiera maksymalnie trzy bezpłatne czcionki, których możesz użyć. Czcionki Google to kolejna niesamowita opcja, w której znajdziesz ponad 900 czcionek do wyboru. Poza tym czcionki internetowe Edge mogą również oferować ogromną różnorodność czcionek. Do użytku osobistego możesz wybrać Fonts.com lub 1001 darmowych czcionek .

DaFont to najstarsza biblioteka czcionek zawierająca ponad 60 000 krojów pisma, z których można filtrować wybrane czcionki. Musisz pobrać wybrane czcionki i nie są one jak integracja z Google Font. Podobnym rodzajem biblioteki czcionek jest UrbanFont z szeroką gamą kreatywnych i lukratywnych czcionek.

custom fonts

Adobe Fonts lub Typekit to bardzo przydatna biblioteka czcionek dla wszystkich projektantów stron internetowych, ponieważ zawiera ponad 1900 czcionek. Nawet jeśli subskrybujesz darmowe konto, nadal oferuje ponad 200 czcionek internetowych.

Jeśli chcesz wypożyczać czcionki na miesiąc i uiszczać opłatę abonamentową, możesz skorzystać z Fontstand . Oferuje około 2000 niesamowitych czcionek i pobiera opłaty co miesiąc. Podobnie jak ta Type Network to kolejna samoobsługowa biblioteka czcionek, w której można uzyskać ponad 400 rodzin czcionek naraz i z łatwością eksplorować.

Jak wybrać najlepszą niestandardową czcionkę dla strony internetowej?

Ponieważ znasz już zasoby umożliwiające znalezienie pożądanych czcionek niestandardowych dla WordPress, musisz teraz wiedzieć, jak wybrać najlepsze czcionki. Odfiltrowanie losowych czcionek sprawi, że proces wyboru będzie długi i niezdarny. Zamiast tego możesz wypróbować następujące kroki, wybierając najlepszą niestandardową czcionkę dla witryny WordPress. W tym blogu przyjrzymy się czcionkom Google, aby wybrać najlepsze czcionki i zobaczyć najlepsze praktyki podczas filtrowania wszystkich czcionek.

custom fonts

Lista ulubionych czcionek – W czcionce Google możesz łatwo wyszukać żądaną czcionkę w polu wyszukiwania i ustawić kategorię. Wynik wyszukiwania zostanie zmieniony zgodnie z Twoim dostosowaniem. Możesz zobaczyć czcionki w alfabecie, cyfrach i innych formatach.

Sprawdź szczegóły czcionki — sprawdzenie szczegółów czcionki jest ważne, ponieważ na pierwszy rzut oka zobaczysz wszystkie dostępne style i rozmiary czcionek. Niesamowitą zaletą Google Fonts jest to, że wyświetla popularne pary z tą czcionką.

custom fonts

Sprawdzając szczegóły czcionki, zwracaj również uwagę na format czcionki. Ponieważ nie wszystkie czcionki obsługują wszystkie systemy przeglądarek. Oto najnowsza lista przeglądarek i lista obsługiwanych formatów czcionek.

custom fonts

Źródło – https://www.w3schools.com/Css/css3_fonts.asp

Wzbogać swoją kolekcję czcionek — po zakończeniu filtrowania odpowiednich czcionek możesz dodać te czcionki do swojej kolekcji, klikając przycisk „ Wybierz tę czcionkę” .

Proste metody dodawania niestandardowej czcionki do witryny WordPress

Zebraliśmy kilka najłatwiejszych sposobów dodawania niestandardowych czcionek do Twojej witryny w formacie krok po kroku. Zanurzmy się i zobaczmy, jak to zrobić.

Jak ręcznie dodać niestandardową czcionkę w WordPressie

Ręczne dodawanie niestandardowych czcionek to najmądrzejszy sposób, aby nie spowalniać witryny. Ponieważ już sprawdziłeś niektóre rozmiary czcionek, aby znaleźć żądaną czcionkę, najpierw pobierz czcionkę. Teraz musisz przesłać czcionkę na swoje konto hostingowe. Sprawdź, jakiego motywu używasz w swojej witrynie WordPress. Prześlij plik CSS swojej czcionki na swoje konto. Podczas pobierania czcionki pamiętaj o rozpakowaniu plików z pliku .zip.

Aby przesłać plik czcionki, przejdź do katalogu wp-content/themes/your-theme/fonts. Dla wygody możesz utworzyć osobny folder czcionek. Prześlij plik za pomocą Menedżera plików do hPanel. Teraz przejdź do swojego konta WordPress i kliknij opcję Wygląd . Wybierz edytor motywów, w którym zostanie wyświetlony plik style.css. Dodaj następujący kod na dole kodu.

@font-face {

rodzina czcionek: Aguafina Script-Regular;

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

grubość czcionki: normalna;

}

Teraz kliknij przycisk „Aktualizuj plik”, aby zapisać zmiany. Pamiętaj, że kod czcionki wczytuje czcionkę za każdym razem, gdy odwiedzający odwiedza Twoją witrynę. Krój pisma jednak nie został jeszcze zastosowany do żadnego elementu. Musisz zmienić ten sam plik style.css, aby przypisać czcionkę do określonego elementu. Poniższy kod, na przykład, spowodowałby, że nagłówek naszej witryny używałby skryptu czcionki.

.tytuł-witryny {

rodzina czcionek: „Aguafina Script-Regular” , Arial, bezszeryfowy;

}

Jak ustawić niestandardowe czcionki za pomocą wtyczek WordPress

Dla wszystkich użytkowników WordPressa korzystanie z wtyczek czcionek to najprostszy sposób na ustawienie niestandardowych czcionek. Tutaj przedstawiliśmy niektóre z najłatwiejszych i najbardziej użytecznych wtyczek czcionek do dodawania niestandardowych czcionek na stronie WordPress.

Czcionki WP Google

custom fonts

Możesz używać niestandardowych czcionek i stosować je do niektórych elementów CSS za pomocą wtyczki WP Google Fonts . Zainstaluj wtyczkę WP Google Fonts z katalogu wtyczek WordPress i użyj pulpitu nawigacyjnego WordPress, aby uzyskać dostęp do Panelu sterowania Google Fonts. Możesz wybrać kroje pisma i dostosować opcje, takie jak styl czcionki, przydzielone elementy i inne.

Wtyczka czcionek

custom fonts

Wtyczka Fonts to darmowa alternatywa dla Easy Google Fonts, która działa w podobny sposób, umożliwiając płynną integrację czcionek Google ze stronami bez konieczności zmiany motywu. Współpracuje również z programem Customizer, umożliwiając wypróbowanie alternatywnych opcji czcionek przed ich opublikowaniem. Wtyczka Fonts ma również integrację z Adobe Fonts, co jest dodatkowym bonusem. Wtyczka Fonts umożliwia również korzystanie z biblioteki krojów czcionek Adobe w materiale.

Stwórz atrakcyjną stronę internetową za pomocą niestandardowych czcionek

Czytelność i elegancja tekstu mają wpływ na to, jak bardzo odwiedzający będą cieszyć się przeglądaniem witryny. Każdy może teraz wybierać spośród wielu krojów pisma do wykorzystania na swojej stronie internetowej. Obecnie nie ma powodu, dla którego używałbyś starej czcionki w swojej witrynie. Dostosowywanie typografii WordPress jest teraz całkowicie pod Twoją kontrolą.

Jeśli uważasz, że ten blog jest interesujący i pomocny, zasubskrybuj nasz blog , aby przeczytać więcej takich blogów. Dołącz do naszej społeczności, aby również dzielić się swoimi przemyśleniami.