Jak zmienić czcionki w WordPress

Doskonałym sposobem na dodanie brandingu i indywidualizmu do witryny WordPress jest zmiana czcionek w motywie.

Typografia i inne elementy pasków tworzą dobre pierwsze wrażenie i tworzą nastrój dla odwiedzających witrynę i ustal tożsamość swojej marki. Firma Studia odkryła również, że czcionki wpływają na zdolność czytelników do uczenia się, przypominania sobie informacji i zapamiętywania tekstów.

Jeśli tylko zainstalował motyw WordPress lub masz trochę doświadczenia w CSS i kodowaniu, pokażemy Ci kilka opcji, których możesz użyć do zmiany czcionek w WordPress.

Jak zmienić czcionki w WordPress

Dostępne są trzy główne opcje zmiany czcionek w WordPress:

Użyj czcionek internetowych, takich jak Czcionki Google, Fonts.com lub Czcionki internetowe Adobe Edge, które są hostowane w witrynie innej firmy

Zakoduj czcionki internetowe w swoim motywie i umieść je w kolejce

Umieść czcionki w swojej witrynie i dodaj je do motywu

1. Jak zmienić czcionki w WordPress za pomocą czcionek internetowych

Korzystanie z czcionek internetowych jest łatwiejszym i szybszym sposobem zmiany czcionek w WordPress niż pobieranie i przesyłanie plików czcionek.

Dzięki temu opcja, możesz uzyskać dostęp do różnych czcionek bez ich aktualizowania za każdym razem, gdy następuje zmiana, i nie zajmuje to miejsca na serwerze na Twoim hostingu. Czcionki są udostępniane bezpośrednio z serwerów dostawcy za pomocą wtyczki lub przez dodanie kodu do witryny.

In_content_1 all: [300x250] / dfp: [640x360]->

Upewnij się, że czcionki internetowe, które wybierasz dla swojej witryny, odpowiadają tożsamości Twojej marki, są łatwe do odczytania w przypadku tekstu podstawowego, są znajome dla odwiedzających witrynę i odzwierciedlają nastrój i obraz, który Ty chcesz.

Możesz dodać czcionki internetowe za pomocą wtyczki WordPress lub ręcznie, dodając kilka wierszy kodu do swojej witryny. Przyjrzyjmy się obu opcjom.

Jak dodać czcionki internetowe za pomocą wtyczki WordPress

W zależności od wybranej czcionki internetowej, możesz użyć WordPress wtyczkę, aby uzyskać dostęp do biblioteki czcionek i wybrać tę, którą chcesz umieścić w swojej witrynie. W tym przewodniku wybraliśmy Google Fonts i użyliśmy wtyczki Typografia czcionek Google.

Aby rozpocząć, zaloguj się do panelu administratora WordPress i wybierz Wtyczki>Dodaj nowy.

Wpisz Google Fonts Typographyw polu wyszukiwania i wybierz Zainstaluj teraz.

Wybierz Aktywuj”.

Następnie przejdź do Customizer, przechodząc do Appearance>Customize.

Wybierz sekcję Google Fonts.

Następnie kliknij link, aby otworzyć ustawienia czcionek i skonfiguruj je w następujący sposób:

W Ustawieniach podstawowychustaw domyślną czcionkę treści tekst, nagłówki i przyciski.

W Ustawieniach zaawansowanychskonfiguruj tytuł i opis witryny ription, menu, nagłówki i zawartość, pasek boczny i stopka.

Odznacz niechciane grubości czcionek w sekcji Ładowanie czcionek, aby wybrać unikaj spowolnienia witryny.

Jeśli w Twojej witrynie są czcionki, które nie wyświetlają się lub nie działają prawidłowo, skorzystaj z sekcji Debugowaniedo rozwiązywania problemów.

Możesz przetestować te ustawienia w module dostosowania, aby upewnić się, że działają tak, jak chcesz, a następnie wybierz opcję Opublikuj.

Uwaga: Jeśli jeśli zapomnisz wybrać opcję publikowania w module dostosowania, utracisz wszystkie wprowadzone zmiany.

Jak dodać czcionki internetowe za pomocą kodu

możesz zainstalować i używać czcionek internetowych, jeśli masz dostęp do kodu motywu. Jest to ręczna alternatywa dla dodania dodatkowej wtyczki, ale nie jest to skomplikowane, jeśli będziesz postępować zgodnie z instrukcjami.

Jednak są różne kroki, które należy wykonać, jeśli używasz motywu z katalogu motywów WordPress lub niestandardowy motyw.

Jeśli kupiłeś motyw z katalogu motywów WordPress, utwórz motyw potomny, a następnie nadaj mu plik style.css i functions.php. Jest to łatwiejsze, jeśli masz dostosowany motyw, ponieważ możesz edytować arkusz stylów i plik funkcji z motywu.

Aby rozpocząć, wybierz czcionkę z biblioteki Czcionki Google, i wybierz ikonę + (plus), aby dodać ją do swojej biblioteki.

Następnie wybierz kartę u dołu, na której znajdziesz kod do dodania do witryny. Przejdź do sekcji Osadź czcionkęna karcie Umieść. Znajdziesz kod wygenerowany przez Google Fonts, który wygląda mniej więcej tak:

Uwaga: do tego przewodnika wybraliśmy Work Sans, więc czcionka Twoja nazwa może się różnić w zależności od tego, co wybrałeś.

Skopiuj tę część kodu: https://fonts.googleapis.com/css2?family = Praca + Sans

Umożliwia to umieszczenie stylu w kolejce z serwerów Google Fonts, aby zapobiec konfliktom z wtyczkami innych firm. Pozwala także na łatwiejsze modyfikacje motywów potomnych.

Aby umieścić czcionkę w kolejce, otwórz plik funkcji i dodaj następujący kod. (Zamień link na link otrzymany z Google Fonts):

function wosib_add_google_fonts () {
wp_register_style ('googleFonts', ' https://fonts.googleapis.com/css?family=Work Sans ');

wp_enqueue_style (' googleFonts ');
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

Możesz dodaj nowy wiersz do funkcji lub do tego samego wiersza, jeśli w przyszłości chcesz dodać więcej czcionek, w następujący sposób:

function mybh_add_google_fonts () {
wp_register_style ('googleFonts', 'https://fonts.googleapis.com/css?family=Cambria|Work Sans');

wp_enqueue_style ('googleFonts') ;
}”

add_action ('wp_enqueue_scripts', 'mybh_add_google_font s ');

W tym przypadku umieściliśmy w kolejce czcionki Cambria i Work Sans.

Następnym krokiem jest dodanie czcionek do arkusza stylów motywu do spraw, aby czcionka działała w Twojej witrynie.

Aby to zrobić, otwórz plik style.css swojego motywu i dodaj kod stylizujący poszczególne elementy za pomocą czcionek internetowych w następujący sposób:

body {
font-family: 'Work Sans', sans-serif;
}”

h1, h2, h3 {
font-family: „Cambria”, serif ;
}

W tym przypadku główną czcionką będzie Work Sans, a elementy nagłówka, takie jak h1, h2 i h3, będą używać Cambria.

Po zakończeniu zapisz arkusz stylów i sprawdź, czy czcionki działają tak, jak powinny. Jeśli nie, sprawdź, czy czcionki nie są zastępowane w arkuszu stylów, lub wyczyść pamięć podręczną przeglądarki i spróbuj ponownie.

Przygotuj czcionkę zapasową, aby upewnić się, że czcionki mogą być łatwo renderowane lub dostępne, zwłaszcza dla użytkowników ze starymi urządzeniami, słabymi połączeniami lub jeśli dostawca czcionek ma problemy techniczne. Aby to zrobić, przejdź do arkusza stylów i edytuj kod CSS tak, aby brzmiał następująco:

body {
font-family: 'Work Sans ', Arial, sans-serif;
}

h1, h2, h3 {
czcionka -rodzina: „Cambria”, Times New Roman, szeryfowa;
}”

Jeśli wszystko w porządku, odwiedzający Twoją witrynę zobaczą Twoje domyślne czcionki internetowe, w naszym przypadku Work Sans i Cambria. Jeśli wystąpią problemy, zobaczą czcionki zapasowe, na przykład w naszym przypadku Arial lub Times New Roman.

2. Jak zmienić czcionki w WordPress przez hosting czcionek

Hostowanie czcionek na własnych serwerach pomaga zoptymalizować wydajność czcionek internetowych, ale także bezpieczniejszy sposób to zrobić zamiast pobierać zasoby z witryn innych firm.

Czcionki Google i inne czcionki internetowe umożliwiają pobieranie czcionek do użytku jako czcionki hostowane lokalnie, ale nadal można pobrać inne czcionki na komputer, o ile pozwolą na to licencje aby to zrobić.

Aby rozpocząć, pobierz, rozpakuj, prześlij plik czcionki do swojej witryny, a następnie połącz go w swoim arkuszu stylów. W tym przypadku nie musisz kolejkować czcionek w pliku functions.php, jak to zrobiono z czcionkami internetowymi. Upewnij się, że przesyłane pliki są w formacie .woff, zanim użyjesz ich w swojej witrynie.

Następnie przejdź do wp-content / themes / themename, aby przesłać plik czcionki do motywu.

Otwórz arkusz stylów i dodaj następujący kod (w tym przypadku używamy czcionki Work Sans, ale możesz ją zastąpić własnymi czcionkami):

@ font-face {
font-family: 'Work Sans';
src: url („fonts / Work Sans-Medium.ttf”) format ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}

@ font-face {
font-family: 'Work Sans';
src: url ( „Fonts / Work Sans-Bold.ttf”) format („woff”); / * medium * /
font-weight: bold;
font-style: normal;
}

@ font-face {
font-family: 'Cambria';
src: url („ fonts / Cambria.ttf ”) format („ woff ”); / * medium * /
font-weight: normal;
font-style: normal;
}

Uwaga: użycie @fontface umożliwia użycie pogrubienia, kursywy i innych odmian czcionki, po czym można określić grubość lub styl każdej czcionki.

Następnie dodaj style do elementów w następujący sposób:

body {
font-family: 'Work Sans ', Arial, sans-serif;
src: url („/ fonts / Work Sans-Medium.ttf”);
}

h1, h2, h3 {
font-family: „Cambria”, Times New Roman, serif;
}

Dostosuj swoją typografię WordPress

Zmiana czcionek w WordPress to świetny pomysł, aby poprawić branding i wygodę użytkownika. Nie jest to proste zadanie, ale będziesz mieć większą kontrolę nad swoim motywem.

Czy udało Ci się dostosować czcionki w witrynie, wykonując czynności, korzystając ze wskazówek zawartych w tym przewodniku? Daj nam znać w komentarzach.

Powiązane posty: