Одличан начин да додате мало брендирања и индивидуализма вашој ВордПресс^(WordPress) веб локацији је да промените фонтове у својој теми.

Типографија и други елементи повезивања стварају добар први утисак, постављају расположење посетиоцима вашег сајта и успостављају идентитет вашег бренда. Студије^(Studies) су такође откриле да фонтови утичу на способност читалаца да уче, присећају се информација и памте текстове.

Ако сте управо инсталирали ВордПресс тему^{(installed a WordPress theme)} или имате неко ЦСС^(CSS) и искуство кодирања, показаћемо вам неколико опција које можете користити за промену фонтова у ВордПресс^(WordPress) -у .

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

Постоје три главне опције које су вам доступне да промените фонтове у ВордПрессу:

• Користите веб фонтове као што су Гоогле Фонтови^{(Google Fonts)} , Фонтс.цом^{( Fonts.com)} или Адобе Едге Веб Фонтови^{( Adobe Edge Web Fonts)} , који се налазе на сајту треће стране
• Кодирајте^(Code) веб фонтове у своју тему и ставите их у ред
• Хостујте^(Host) фонтове на својој веб локацији и додајте их својој теми

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

Коришћење веб фонтова је лакши и бржи начин за промену фонтова у ВордПресс^(WordPress) -у од преузимања и отпремања датотека фонтова.

Са овом опцијом, можете приступити разним фонтовима^{(access a variety of fonts)} без ажурирања сваки пут када дође до промене, и не заузима простор на серверу на вашем хостингу. Фонтови се сервирају директно са сервера добављача помоћу додатка или додавањем кода на вашу веб локацију.

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

Можете додати веб фонтове користећи ВордПресс додатак^{(using a WordPress plugin)} или ручно додавањем неколико линија кода на своју веб локацију. Хајде да истражимо обе опције.

Како додати веб фонтове помоћу ВордПресс додатка^{(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)} , а затим јој дајте стиле.цсс и фунцтионс.пхп датотеку. Лакше је ако имате прилагођену тему јер можете уређивати датотеку стилова и функција из своје теме.

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. Да бисте то урадили, отворите датотеку стиле.цсс своје теме и додајте код за стилизовање појединачних елемената са вашим веб фонтовима на следећи начин:

боди { ^{(body {)}
фонт-фамили: 'Ворк Санс', санс-сериф; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

х1, х2, х3 { ^{(h1, h2, h3 {)}
фонт-фамили: 'Цамбриа', сериф; ^{(font-family: ‘Cambria’, serif;)}
}

У овом случају, главни фонт ће бити Ворк Санс^{(Work Sans)} , док ће елементи заглавља попут х1, х2 и х3 користити Цамбриа^(Cambria) .

Када завршите, сачувајте таблицу стилова и проверите да ли ваши фонтови раде како треба. Ако није, проверите да ли се фонтови не замењују у табели стилова или обришите кеш претраживача и покушајте поново.

1. Поставите резервни фонт како бисте осигурали да се фонтови могу лако приказати или приступити, посебно за кориснике са старим уређајима, лошим везама или ако добављач фонтова има техничких проблема. Да бисте то урадили, идите на листу стилова и уредите ЦСС^(CSS) тако да гласи на следећи начин:

боди { ^{(body {)}
фонт-фамили: 'Ворк Санс', Ариал, санс-сериф; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

х1, х2, х3 { ^{(h1, h2, h3 {)}
фонт-фамили: 'Цамбриа', Тимес Нев Роман, сериф; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Ако је све у реду, посетиоци вашег сајта ће видети ваше подразумеване веб фонтове, у нашем случају Ворк Санс^{(Work Sans)} и Цамбриа^(Cambria) . Ако постоје проблеми, видеће резервне фонтове, на пример Ариал^(Arial) или Тимес Нев Роман^{(Times New Roman)} у нашем случају.

2. Како да промените фонтове у ВордПресс-у хостовањем фонтова^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Хостовање фонтова на сопственим серверима помаже вам да оптимизујете перформансе својих веб фонтова, али је и сигурнији начин^{(a more secure way)} да то урадите уместо да привучете ресурсе са сајтова трећих страна.

Гоогле^(Google) фонтови и други веб фонтови вам омогућавају да преузмете фонтове за коришћење као локално хостоване фонтове, али и даље можете да преузмете друге фонтове на свој рачунар под условом да вам лиценце то дозвољавају.

1. Да бисте започели, преузмите, распакујте, отпремите датотеку фонта на своју веб локацију, а затим је повежите у листу стилова. У овом случају не морате да стављате фонтове у ред у датотеци фунцтионс.пхп као што сте урадили са веб фонтовима. Потврдите да су датотеке које отпремате у .вофф^(.woff) формату пре него што их употребите на својој веб локацији.

1. Затим идите на wp-content/themes/themename да бисте отпремили датотеку фонта у своју тему. 
2. Отворите листу стилова и додајте следећи код (у овом случају користимо фонт Ворк Санс^(Sans) , али га можете заменити својим фонтовима):

@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) : Коришћење @фонтфаце вам омогућава да користите подебљано, курзив и друге варијације вашег фонта, након чега можете одредити тежину или стил за сваки фонт.

1. Затим додајте стил за своје елементе на следећи начин:

боди { ^{(body {)}
фонт-фамили: 'Ворк Санс', Ариал, санс-сериф; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

х1, х2, х3 { ^{(h1, h2, h3 {)}
фонт-фамили: 'Цамбриа', Тимес Нев Роман, сериф; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Прилагодите своју ВордПресс типографију^{(Customize Your WordPress Typography)}

Промена фонтова у ВордПресс^(WordPress) -у је одлична идеја за побољшање брендирања и корисничког искуства. То није једноставан задатак, али ћете имати више контроле над својом темом.

Да ли^(Were) сте могли да прилагодите фонтове своје веб локације користећи кораке користећи савете у овом водичу? Реците^(Tell) нам у коментарима.

How to Change Fonts in WordPress

A great way to add some branding and indіvidualіsm to your WordPress site iѕ to change the fontѕ 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

• Како преместити ВордПресс веб локацију са једног хоста на други

• Како инсталирати и подесити ВордПресс на Мицрософт Азуре

• Како покренути невероватно брз ВордПресс на Мицрософт Азуре

• Како да конфигуришете приватност у ВордПресс-у и зашто је то важно

• Како инсталирати ВордПресс на Гоогле Цлоуд Платформу

• 7 ВордПресс савета за веб локацију прилагођену мобилним уређајима

• Како уредити подножје у ВордПресс-у

• Како извршити ефикасне Сплит тестове у ВордПресс-у

• Скуареспаце против ВордПресс-а: Која је боља платформа сајта?

• Како се користи ВП Супер Цацхе на ВордПресс блогу

• Како пронаћи своју пријаву администратора за ВордПресс

• Како да направите сопствени искачући прозор са купоном у ВордПресс-у

• 8 бесплатних Премиум ВордПресс тема за инсталирање

• Како додати плутајућу бочну траку у Вордпресс

• Како да пратите неисправне везе помоћу Гоогле алатке за вебмастере

• Како направити резервну копију вашег ВордПресс сајта

• Вик вс ВордПресс: Шта је најбоље за креирање ваше веб странице?

• Најбољи формат за писање на блогу за постизање ваших поена

• Како прећи са класичног ВордПресс уређивача на Гутенберг

• Како да промените УРЛ за пријаву на ВордПресс за бољу безбедност