Świetnym sposobem na dodanie brandingu i indywidualizmu do witryny WordPress jest zmiana czcionek w motywie.

Typografia i inne elementy opaski tworzą dobre pierwsze wrażenie, tworzą nastrój dla odwiedzających Twoją witrynę i określają tożsamość Twojej marki. Badania^(Studies) wykazały również, że czcionki wpływają na zdolność czytelników do uczenia się, przypominania sobie informacji i zapamiętywania tekstów.

Jeśli właśnie zainstalowałeś motyw WordPress^{(installed a WordPress theme)} lub masz trochę doświadczenia z CSS i kodowaniem, pokażemy Ci kilka opcji, których możesz użyć do zmiany czcionek w WordPress .

Jak zmienić czcionki w WordPressie^{(How to Change Fonts in WordPress)}

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

• Używaj czcionek internetowych, takich jak Google Fonts , Fonts.com lub Adobe Edge Web Fonts , które są hostowane w witrynie innej firmy
• Zakoduj^(Code) czcionki internetowe w swoim motywie i umieść je w kolejce
• Hostuj^(Host) czcionki w swojej witrynie i dodawaj je do swojego motywu

1. Jak zmienić czcionki w WordPress za pomocą czcionek internetowych?^{(1. How to Change Fonts in WordPress Using Web Fonts)}

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

Dzięki tej opcji możesz uzyskać dostęp do różnych czcionek^{(access a variety of fonts)} bez aktualizowania ich za każdym razem, gdy następuje zmiana, i nie zajmuje to miejsca na serwerze na twoim hostingu. Czcionki są podawane bezpośrednio z serwerów dostawcy za pomocą wtyczki lub poprzez dodanie kodu do Twojej witryny.

Upewnij^(Make) się, że czcionki internetowe, które wybierzesz dla swojej witryny, są zgodne z tożsamością Twojej marki, są łatwe do odczytania w tekście głównym, są znajome dla odwiedzających witrynę i przekazują pożądany nastrój i obraz.

Możesz dodać czcionki internetowe za pomocą wtyczki WordPress^{(using a WordPress plugin)} lub ręcznie, dodając kilka wierszy kodu do swojej witryny. Zbadajmy obie opcje.

Jak dodawać czcionki internetowe za pomocą wtyczki WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

W zależności od wybranej czcionki internetowej możesz użyć wtyczki WordPress , 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 Google Fonts Typography .

1. Aby rozpocząć, zaloguj się do pulpitu administracyjnego WordPress i wybierz ^(WordPress)Plugins > Add New .

1. Wpisz Google Fonts Typography w polu wyszukiwania i wybierz Zainstaluj teraz^{(Install Now)} .

1. Wybierz Aktywuj^(Activate) .

1. Następnie uzyskaj dostęp do Customizer , przechodząc do opcji Appearance > Customize .

1. Wybierz sekcję Czcionki Google .^{(Google Fonts)}

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

• W obszarze Ustawienia podstawowe^{(Basic Settings)} ustaw domyślną czcionkę tekstu podstawowego, nagłówków i przycisków.

• W obszarze Ustawienia zaawansowane^{(Advanced Settings)} skonfiguruj tytuł i opis witryny, menu, nagłówki i treść, pasek boczny i stopkę.

• Usuń zaznaczenie^(Uncheck) niechcianych grubości czcionek w sekcji Ładowanie czcionek^{(Font Loading)} , aby uniknąć spowolnienia witryny^{(avoid slowing down your site)} .

Jeśli w Twojej witrynie znajdują się czcionki, które nie wyświetlają się lub nie działają poprawnie, skorzystaj z sekcji debugowanie^{(Debugging )} , aby rozwiązać problem.

1. Możesz przetestować te ustawienia w programie Customizer , aby upewnić się, że działają tak, jak chcesz, a następnie wybierz opcję Opublikuj^(Publish) .

Uwaga^(Note) : jeśli zapomnisz wybrać opcję publikowania w programie Customizer , utracisz wszystkie wprowadzone zmiany.

Jak dodawać czcionki internetowe za pomocą kodu?^{(How to Add Web Fonts Using Code)}

Możesz zainstalować czcionki internetowe i używać ich, jeśli masz dostęp do kodu motywu. Jest to ręczna alternatywa dla dodawania dodatkowej wtyczki, ale nie jest to skomplikowane, jeśli będziesz uważnie postępować zgodnie z instrukcjami.

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

Jeśli kupiłeś motyw z katalogu motywów WordPress , utwórz motyw podrzędny,^{(create a child theme)} a następnie nadaj mu plik style.css i functions.php. Łatwiej jest, jeśli masz dostosowany motyw, ponieważ możesz edytować arkusz stylów i plik funkcji ze swojego motywu.

1. Aby rozpocząć, wybierz czcionkę z biblioteki Google Fonts i wybierz ikonę ^{(Google Fonts)}+ (plus) , aby dodać ją do swojej biblioteki.

1. Następnie wybierz kartę u dołu, na której znajdziesz kod do dodania do swojej witryny. Przejdź do sekcji Osadź czcionkę^{(Embed font)} na karcie Osadź^(Embed) . Znajdziesz kod wygenerowany przez Google Fonts , który wygląda mniej więcej tak:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Uwaga^(Note) : W tym przewodniku wybraliśmy Work Sans , więc nazwa czcionki może być inna w zależności od tego, co wybrałeś.

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

Pozwala to na 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.

1. Aby umieścić czcionkę w kolejce, otwórz plik funkcji i dodaj następujący kod. ( Zastąp^(Replace) link linkiem otrzymanym 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' );

1. Możesz dodać nowy wiersz do swojej funkcji lub do tego samego wiersza, jeśli chcesz dodać więcej czcionek w przyszłości 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_fonts' );

W tym przypadku umieściliśmy w kolejce zarówno czcionki Cambria , jak i Work Sans .

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

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

body {
rodzina czcionek: 'Work Sans', sans-serif; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
rodzina czcionek: 'Cambria', szeryf; ^{(font-family: ‘Cambria’, serif;)}
}

W tym przypadku główną czcionką będzie Work Sans , podczas gdy 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.

1. Przygotuj czcionkę zapasową, aby zapewnić łatwe renderowanie lub dostęp do czcionek, szczególnie w przypadku 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 CSS w następujący sposób:

body {
rodzina czcionek: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
rodzina czcionek: 'Cambria', Times New Roman, szeryf; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

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

2. Jak zmienić czcionki w WordPressie przez hosting czcionek^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Hostowanie czcionek na własnych serwerach pomaga zoptymalizować wydajność czcionek internetowych, ale jest to również bezpieczniejszy sposób^{(a more secure way)} robienia tego zamiast pobierania zasobów z witryn innych firm.

Czcionki Google^(Google) i inne czcionki internetowe umożliwiają pobieranie czcionek do użytku jako czcionki hostowane lokalnie, ale nadal można pobierać inne czcionki na komputer, pod warunkiem, że pozwalają na to licencje.

1. 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 zrobiłeś z czcionkami internetowymi. Upewnij się, że przesyłane pliki są w formacie .woff , zanim użyjesz ich w swojej witrynie.

1. Następnie przejdź do wp-content/themes/themename , aby przesłać plik czcionki do swojego motywu. 
2. 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 {
rodzina czcionek: „Pracuj bez”; ^{(font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
grubość czcionki: normalna; ^{( font-weight: normal;)}
styl czcionki: normalny; ^{( font-style: normal;)}
}

@font-face {
rodzina czcionek: „Pracuj bez”; ^{( font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
styl czcionki: normalny; ^{(font-style: normal;)}
}

@font-face {
rodzina czcionek: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
grubość czcionki: normalna; ^{( font-weight: normal;)}
styl czcionki: normalny; ^{( font-style: normal;)}
}

Uwaga^(Note) : Używanie @fontface pozwala na użycie pogrubienia, kursywy i innych odmian czcionki, po czym możesz określić grubość lub styl dla każdej czcionki.

1. Następnie dodaj stylizację dla swoich elementów w następujący sposób:

body {
rodzina czcionek: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
rodzina czcionek: 'Cambria', Times New Roman, szeryf; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Dostosuj swoją typografię WordPress^{(Customize Your WordPress Typography)}

Zmiana czcionek w WordPressie^(WordPress) to świetny pomysł na poprawę brandingu i doświadczenia użytkownika. Nie jest to proste zadanie, ale będziesz mieć większą kontrolę nad swoim motywem.

Czy^(Were) udało Ci się dostosować czcionki w swojej witrynie, wykonując czynności opisane w poradach zawartych w tym przewodniku? Powiedz^(Tell) nam w komentarzach.

How to Change Fonts in WordPress

A great way to аdd some branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from 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’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

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_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

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

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

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@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;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

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;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Jak przenieść witrynę WordPress z jednego hosta na drugi?

• Jak zainstalować i skonfigurować WordPress na Microsoft Azure

• Jak uruchomić niesamowicie szybki WordPress na Microsoft Azure

• Jak skonfigurować prywatność w WordPressie i dlaczego jest to ważne

• Jak zainstalować WordPress na Google Cloud Platform

• Jak ręcznie skonfigurować WordPress w domenie?

• 3 najlepsze wtyczki SEO dla WordPress

• Jak edytować stopkę w WordPressie

• Jak przyspieszyć witrynę WordPress w 11 krokach

• Jak sprawdzić, czy witryna jest zablokowana w AdSense

• Jak założyć własną witrynę podobną do Twittera za pomocą motywu WordPress P2?

• Przekieruj użytkowników ze strony 404 w WordPress

• Recenzja książki: Zbuduj własną stronę internetową: komiksowy przewodnik po HTML, CSS i Wordpress

• WordPress pokazuje błąd HTTP podczas przesyłania obrazów

• Jak przyspieszyć dowolną witrynę WordPress za pomocą .HTACCESS

• Najlepszy format pisania bloga, aby zdobyć punkty na całym świecie

• Wix vs WordPress: który jest najlepszy do stworzenia Twojej witryny?

• Jak stworzyć bloga Wix, który jest tak samo dobry jak WordPress

• Jak dodać pływający pasek boczny w Wordpress?

• 9 niezbędnych wtyczek do nowych instalacji WordPress