Чудесен начин да добавите известна марка и индивидуализъм към вашия WordPress сайт е да промените шрифтовете във вашата тема.

Типографията и други елементи на облицовка създават добро първо впечатление, създават настроение на посетителите на вашия сайт и установяват идентичността на вашата марка. Проучванията^(Studies) също така установяват, че шрифтовете влияят върху способността на читателите да учат, да си припомнят информация и да запомнят текстове.

Ако току-що сте инсталирали тема на WordPress^{(installed a WordPress theme)} или имате опит с CSS и кодиране, ще ви покажем няколко опции, които можете да използвате за промяна на шрифтове в WordPress .

Как да промените шрифтовете в WordPress^{(How to Change Fonts in WordPress)}

Има три основни опции за промяна на шрифтове в WordPress:

• Използвайте уеб шрифтове като Google Fonts , Fonts.com или Adobe Edge Web Fonts , които се хостват на сайт на трета страна
• Кодирайте^(Code) уеб шрифтове във вашата тема и ги подредете
• Хоствайте^(Host) шрифтове на вашия сайт и ги добавете към вашата тема

1. Как да променяте шрифтовете в WordPress с помощта на уеб шрифтове^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Използването на уеб шрифтове е по-лесен и бърз начин за промяна на шрифтове в WordPress , отколкото изтеглянето и качването на файлове с шрифтове.

С тази опция можете да получите достъп до различни шрифтове,^{(access a variety of fonts)} без да ги актуализирате всеки път, когато има промяна, и това не заема място на сървъра на вашия хостинг. Шрифтовете се обслужват директно от сървърите на доставчика с помощта на плъгин или чрез добавяне на код към вашия сайт.

Уверете^(Make) се, че уеб шрифтовете, които избирате за вашия сайт, съответстват на идентичността на вашата марка, лесни за четене за основния текст, познати са на посетителите на уебсайта и предават настроението и изображението, което искате.

Можете да добавяте уеб шрифтове с помощта на плъгин за WordPress^{(using a WordPress plugin)} или ръчно, като добавите няколко реда код към вашия сайт. Нека разгледаме и двата варианта.

Как да добавяте уеб шрифтове с помощта на плъгин за WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

В зависимост от уеб шрифта, който сте избрали, можете да използвате плъгин за WordPress за достъп до библиотеката от шрифтове и да изберете този, който искате на вашия сайт. За това ръководство избрахме Google Fonts и използвахме приставката Google Fonts Typography .

1. За да започнете, влезте в таблото си за управление на WordPress и изберете Plugins > Add New .

1. Въведете Google Fonts Typography в полето за търсене и изберете Инсталиране сега^{(Install Now)} .

1. Изберете Активиране^(Activate) .

1. След това отворете инструмента за персонализиране^(Customizer) , като отидете на Appearance > Customize .

1. Изберете секцията Google Fonts .

1. След това щракнете върху връзката, за да отворите настройките на шрифтовете и да ги конфигурирате, както следва:

• Под Основни настройки^{(Basic Settings)} задайте шрифта по подразбиране за основния текст, заглавията и бутоните.

• Под Разширени настройки^{(Advanced Settings)} конфигурирайте заглавието и описанието на вашия сайт, менюто, заглавията и съдържанието, страничната лента и долния колонтитул.

• Премахнете отметката^(Uncheck) от всички нежелани шрифтове в секцията Зареждане на шрифтове^{(Font Loading)} , за да избегнете забавяне на вашия сайт^{(avoid slowing down your site)} .

Ако на вашия сайт има шрифтове, които не се показват или не работят правилно, използвайте раздела за отстраняване на грешки^{(Debugging )} , за да отстраните неизправности.

1. Можете да тествате тези настройки в инструмента за персонализиране^(Customizer) , за да се уверите, че работят по начина, по който искате, и след това изберете Публикуване^(Publish) .

Забележка^(Note) : Ако забравите да изберете публикуване в инструмента за персонализиране^(Customizer) , ще загубите всички промени, които сте направили.

Как да добавяте уеб шрифтове с помощта на код^{(How to Add Web Fonts Using Code)}

Можете да инсталирате и използвате уеб шрифтове, ако имате достъп до кода на вашата тема. Това е ръчна алтернатива на добавянето на допълнителен плъгин, но не е сложно, ако следвате внимателно стъпките.

Въпреки това, има различни стъпки, които трябва да предприемете, ако използвате тема от директорията с теми на WordPress или персонализирана тема.

Ако сте закупили тема от директорията с теми на WordPress , създайте дъщерна тема^{(create a child theme)} и след това й дайте файла style.css и functions.php. По-лесно е, ако имате персонализирана тема, тъй като можете да редактирате файла със стилове и функции от вашата тема.

1. За да започнете, изберете шрифт от библиотеката на Google Fonts и изберете иконата + (plus) , за да го добавите към вашата библиотека.

1. След това изберете раздела в долната част, където ще намерите кода, който да добавите към вашия сайт. Отидете в секцията Вграждане на шрифт^{(Embed font)} под раздела Вграждане^(Embed) . Ще намерите кода, генериран от Google Fonts , който изглежда нещо подобно:

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

Забележка^(Note) : Избрахме Work Sans за това ръководство, така че името на шрифта може да е различно от вашето в зависимост от това, което сте избрали.

1. Копирайте тази част от кода: https://fonts.googleapis.com/css2?family=Work+Sans

Това ви позволява да поставите в опашка стила от сървърите на Google Fonts , за да предотвратите конфликт с плъгини на трети страни. Освен това позволява по-лесни модификации на детска тема.

1. За да поставите шрифта в опашката, отворете файла с функции и добавете следния код. ( Заменете^(Replace) връзката с връзката, която получавате от 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. Можете да добавите нов ред към вашата функция или към същия ред, ако искате да добавите още шрифтове в бъдеще, както следва:

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');

В този случай сме поставили в опашката шрифтове Cambria и Work Sans .

Следващата стъпка е да добавите шрифтовете към стиловата таблица на вашата тема, за да накарате шрифта да работи на вашия сайт.

1. За да направите това, отворете файла style.css на вашата тема и добавете кода за стилизиране на отделни елементи с вашите уеб шрифтове, както следва:

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

h1, h2, h3 {
font-family: 'Cambria', сериф; ^{(font-family: ‘Cambria’, serif;)}
}

В този случай основният шрифт ще бъде Work Sans , докато елементите на заглавката като h1, h2 и h3 ще използват Cambria .

След като приключите, запазете таблицата със стилове и проверете дали вашите шрифтове работят както трябва. Ако не, проверете дали шрифтовете не са отменени в таблицата със стилове или изчистете кеша на браузъра си и опитайте отново.

1. Имайте резервен шрифт, за да гарантирате, че шрифтовете могат да бъдат изобразени или достъпни лесно, особено за потребители със стари устройства, лоши връзки или ако доставчикът на шрифтове има технически проблеми. За да направите това, отидете на таблицата със стилове и редактирайте CSS , за да четете както следва:

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

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, сериф; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Ако всичко е наред, посетителите на вашия сайт ще видят вашите уеб шрифтове по подразбиране, в нашия случай Work Sans и Cambria . Ако има проблеми, те ще видят резервните шрифтове, например Arial или Times New Roman в нашия случай.

2. Как да промените шрифтовете в WordPress чрез хостинг на шрифтове^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Хостингът на шрифтове на вашите собствени сървъри ви помага да оптимизирате производителността на вашите уеб шрифтове, но също така е по-сигурен начин^{(a more secure way)} да го направите, вместо да изтегляте ресурси от сайтове на трети страни.

Google Fonts и други уеб шрифтове ви позволяват да изтегляте шрифтове за използване като локално хоствани шрифтове, но все пак можете да изтегляте други шрифтове на вашия компютър, при условие че лицензите ви позволяват да го направите.

1. За да започнете, изтеглете, разархивирайте, качете файла с шрифта на вашия сайт и след това го свържете във вашия стилов лист. В този случай не е нужно да поставяте в опашката шрифтовете във файла functions.php, както направихте с уеб шрифтовете. Уверете се, че файловете, които качвате, са във формат .woff , преди да ги използвате на уебсайта си.

1. След това отидете на wp-content/themes/themename , за да качите файла с шрифта във вашата тема. 
2. Отворете листа със стилове и добавете следния код (в този случай ние използваме шрифт Work Sans , но можете да го замените със свои собствени шрифтове):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: нормален; ^{( font-weight: normal;)}
font-style: нормален; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: получер; ^{( font-weight: bold;)}
font-style: нормален; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: нормален; ^{( font-weight: normal;)}
font-style: нормален; ^{( font-style: normal;)}
}

Забележка^(Note) : Използването на @fontface ви позволява да използвате удебелен шрифт, курсив и други варианти на вашия шрифт, след което можете да посочите теглото или стила за всеки шрифт.

1. След това добавете стил за вашите елементи, както следва:

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

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, сериф; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Персонализирайте вашата WordPress типография^{(Customize Your WordPress Typography)}

Промяната на шрифтове в WordPress е чудесна идея за подобряване на брандирането и потребителското изживяване. Това не е лесна задача, но ще имате повече контрол върху вашата тема.

Успяхте^(Were) ли да персонализирате шрифтовете на вашия сайт, като използвате стъпките, използвайки съветите в това ръководство? Кажете^(Tell) ни в коментарите.

How to Change Fonts in WordPress

A great way to add some branding and individualism to yoυr WordPress site is to change thе fonts in your thеme.

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

• Как да преместите WordPress сайт от един хост на друг

• Как да инсталирате и настроите WordPress на Microsoft Azure

• Как да стартирате невероятно бърз WordPress на Microsoft Azure

• Как да конфигурирате поверителност в WordPress и защо е важно

• Как да инсталирате WordPress на Google Cloud Platform

• Как да промените URL адреса си за вход в WordPress за по-добра сигурност

• Урок за WordPress Gutenberg: Как да използвате новия редактор

• Как да използвате WP Super Cache в блога на WordPress

• Как да намерите своя вход за администратор на WordPress

• Как да повишите производителността в WordPress чрез почистване на базата данни

• Как да проверите дали даден уебсайт е забранен от AdSense

• Как да инсталирате тема на WordPress

• Squarespace срещу WordPress: Коя е по-добрата платформа за сайт?

• 7 WordPress съвета за удобен за мобилни устройства уебсайт

• Как да използвате Lumen5, за да превърнете публикацията си в блог във видео

• Пренасочване на потребителите от 404 страница в WordPress

• Как да защитите с парола страници на вашия WordPress уебсайт

• 9 задължителни плъгини за нови инсталирания на WordPress

• Рецензия на книга: Създайте свой собствен уебсайт: Комикс ръководство за HTML, CSS и Wordpress

• WordPress показва HTTP грешка при качване на изображения