Sjajan način da dodate malo brendiranja i individualizma vašoj WordPress stranici je promjena fontova u svojoj temi.

Tipografija i drugi elementi povezivanja stvaraju dobar prvi dojam, postavljaju raspoloženje posjetiteljima vaše stranice i uspostavljaju identitet vašeg brenda. Studije^(Studies) su također otkrile da fontovi utječu na sposobnost čitatelja da uče, prisjećaju se informacija i pamte tekstove.

Ako ste upravo instalirali WordPress temu^{(installed a WordPress theme)} ili imate iskustva s CSS -om i kodiranjem, pokazat ćemo vam nekoliko opcija koje možete koristiti za promjenu fontova u WordPressu^(WordPress) .

Kako promijeniti fontove u WordPressu^{(How to Change Fonts in WordPress)}

Na raspolaganju su vam tri glavne opcije za promjenu fontova u WordPressu:

• Koristite web fontove kao što su Google Fontovi^{(Google Fonts)} , Fonts.com ili Adobe Edge Web Fontovi^{( Adobe Edge Web Fonts)} koji se nalaze na web-mjestu treće strane
• Kodirajte^(Code) web fontove u svoju temu i stavite ih u red
• Hostirajte^(Host) fontove na svojoj web stranici i dodajte ih svojoj temi

1. Kako promijeniti fontove u WordPressu pomoću web fontova^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Korištenje web fontova je lakši i brži način za promjenu fontova u WordPressu^(WordPress) od preuzimanja i učitavanja datoteka fontova.

S ovom opcijom možete pristupiti raznim fontovima^{(access a variety of fonts)} bez ažuriranja svaki put kada dođe do promjene i ne zauzima prostor na poslužitelju na vašem hostingu. Fontovi se poslužuju izravno s poslužitelja davatelja pomoću dodatka ili dodavanjem koda na vašu stranicu.

Pobrinite^(Make) se da web fontovi koje odaberete za svoju web-lokaciju odgovaraju identitetu vašeg brenda, da su laki za čitanje za osnovni tekst, da su poznati posjetiteljima web-mjesta i da prenose raspoloženje i sliku koju želite.

Možete dodati web fontove pomoću dodatka za WordPress^{(using a WordPress plugin)} ili ručno dodavanjem nekoliko redaka koda na svoju stranicu. Istražimo obje opcije.

Kako dodati web fontove pomoću WordPress dodatka^{(How to Add Web Fonts Using a WordPress Plugin)}

Ovisno o web fontu koji ste odabrali, možete koristiti WordPress dodatak za pristup biblioteci fontova i odabrati onaj koji želite na svojoj web stranici. Za ovaj vodič odabrali smo Google Fontove^{(Google Fonts)} i koristili dodatak za tipografiju Google Fonts .^{(Google Fonts Typography)}

1. Za početak, prijavite se na svoju WordPress administratorsku nadzornu ploču i odaberite Plugins > Add New .

1. U okvir za pretraživanje upišite tipografiju Google fontova i odaberite Instaliraj ^{(Google Fonts Typography)}odmah^{(Install Now)} .

1. Odaberite Aktiviraj^(Activate) .

1. Zatim pristupite alatu za prilagođavanje^(Customizer) tako da odete na Appearance > Customize .

1. Odaberite odjeljak Google Fontovi^{(Google Fonts)} .

1. Zatim kliknite na vezu kako biste otvorili postavke fontova i konfigurirali ih na sljedeći način:

• U odjeljku Osnovne postavke^{(Basic Settings)} postavite zadani font za osnovni tekst, naslove i gumbe.

• Pod Naprednim postavkama^{(Advanced Settings)} konfigurirajte naslov i opis web-mjesta, izbornik, naslove i sadržaj, bočnu traku i podnožje.

• Poništite^(Uncheck) sve neželjene težine fonta u odjeljku Učitavanje fontova kako ^{(Font Loading)}biste izbjegli usporavanje vaše stranice^{(avoid slowing down your site)} .

Ako na vašoj web-lokaciji postoje fontovi koji se ne prikazuju ili ne rade ispravno, upotrijebite odjeljak Otklanjanje pogrešaka^{(Debugging )} za rješavanje problema.

1. Možete testirati ove postavke u alatu za prilagođavanje^(Customizer) kako biste bili sigurni da rade onako kako želite, a zatim odaberite Objavi^(Publish) .

Napomena^(Note) : ako zaboravite odabrati objavi u alatu za prilagođavanje^(Customizer) , izgubit ćete sve promjene koje ste napravili.

Kako dodati web fontove pomoću koda^{(How to Add Web Fonts Using Code)}

Možete instalirati i koristiti web fontove ako imate pristup kodu svoje teme. Ovo je ručna alternativa dodavanju dodatnog dodatka, ali nije komplicirano ako pažljivo slijedite korake.

Međutim, postoje različiti koraci koje trebate poduzeti ako koristite temu iz direktorija WordPress tema ili prilagođenu temu.

Ako ste kupili temu iz direktorija WordPress tema, ^(WordPress)stvorite podređenu temu^{(create a child theme)} i zatim joj dajte style.css i functions.php datoteku. Lakše je ako imate prilagođenu temu jer možete uređivati ​​datoteku stilova i funkcija iz svoje teme.

1. Za početak odaberite font iz biblioteke Google fontova^{(Google Fonts)} i odaberite ikonu + (plus) da biste ga dodali u svoju biblioteku.

1. Zatim odaberite karticu pri dnu gdje ćete pronaći kod za dodavanje na svoju web-lokaciju. Idite na odjeljak Ugradi font^{(Embed font)} ispod kartice Ugradi . ^(Embed)Pronaći ćete kôd koji generiraju Google Fontovi^{(Google Fonts)} , koji izgleda otprilike ovako:

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

Napomena^(Note) : odabrali smo Work Sans za ovaj vodič tako da naziv fonta može biti drugačiji od vašeg ovisno o tome što ste odabrali.

1. Kopirajte ovaj dio koda: https://fonts.googleapis.com/css2?family=Work+Sans

To vam omogućuje stavljanje stila u red s poslužitelja Google^{(Google Fonts)} Fontova kako biste spriječili sukob s dodacima trećih strana. Također omogućuje lakše izmjene dječje teme.

1. Za postavljanje fonta u red, otvorite datoteku funkcija i dodajte sljedeći kod. ( Zamijenite^(Replace) vezu vezom koju dobijete od Google Fontova^{(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žete dodati novi redak svojoj funkciji ili istom redu ako u budućnosti želite dodati još fontova na sljedeći način:

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

U ovom slučaju, stavili smo u red i Cambria i Work Sans fontove.

Sljedeći korak je dodavanje fontova u tablicu stilova vaše teme kako bi font funkcionirao na vašoj web-lokaciji.

1. Da biste to učinili, otvorite datoteku style.css svoje teme i dodajte kod za stiliziranje pojedinačnih elemenata s vašim web fontovima na sljedeći način:

tijelo { ^{(body {)}
font-family: 'Work Sans', sans-serif;
}

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

U ovom slučaju, glavni će font biti Work Sans , dok će elementi zaglavlja poput h1, h2 i h3 koristiti Cambria .

Kada završite, spremite tablicu stilova i provjerite rade li vaši fontovi kako bi trebali. Ako ne, provjerite da se fontovi ne nadjačavaju u tablici stilova ili izbrišite predmemoriju preglednika i pokušajte ponovno.

1. Postavite rezervni font kako biste osigurali da se fontovi mogu jednostavno prikazati ili pristupiti, posebno za korisnike sa starim uređajima, lošim vezama ili ako dobavljač fontova ima tehničkih problema. Da biste to učinili, idite na tablicu stilova i uredite CSS kako bi glasio kako slijedi:

tijelo { ^{(body {)}
font-family: 'Work Sans', Arial, sans-serif;
}

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

Ako je sve u redu, posjetitelji vaše stranice vidjet će vaše zadane web fontove, u našem slučaju Work Sans i Cambria . Ako postoje problemi, vidjet će sigurnosne fontove, na primjer Arial ili Times New Roman u našem slučaju.

2. Kako promijeniti fontove u WordPressu hostingom fontova^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Hostiranje fontova na vlastitim poslužiteljima pomaže vam optimizirati performanse vaših web fontova, ali je i sigurniji način^{(a more secure way)} da to učinite umjesto privlačenja resursa s web-mjesta trećih strana.

Google fontovi i drugi web fontovi omogućuju vam preuzimanje fontova za korištenje kao lokalno hostiranih fontova, ali i dalje možete preuzeti druge fontove na svoje računalo pod uvjetom da vam licence to dopuštaju.

1. Da biste započeli, preuzmite, raspakirajte, prenesite datoteku fonta na svoju web-lokaciju, a zatim je povežite u svojoj tablici stilova. U ovom slučaju ne morate stavljati fontove u red u datoteci functions.php kao što ste to učinili s web fontovima. Provjerite jesu li datoteke koje prenosite u formatu .woff prije nego ih koristite na svojoj web stranici.

1. Zatim idite na wp-content/themes/themename da biste prenijeli datoteku fonta u svoju temu. 
2. Otvorite tablicu stilova i dodajte sljedeći kod (u ovom slučaju koristimo font Work Sans , ali ga možete zamijeniti svojim vlastitim fontovima):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normalan; ^{( font-weight: normal;)}
stil fonta: normalan; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
stil fonta: normalan; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normalan; ^{( font-weight: normal;)}
stil fonta: normalan; ^{( font-style: normal;)}
}

Napomena^(Note) : Korištenje @fontface omogućuje vam da koristite podebljano, kurziv i druge varijacije vašeg fonta, nakon čega možete odrediti težinu ili stil za svaki font.

1. Zatim dodajte stil za svoje elemente na sljedeći način:

tijelo { ^{(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;
}

Prilagodite svoju WordPress tipografiju^{(Customize Your WordPress Typography)}

Promjena fontova u WordPressu^(WordPress) odlična je ideja za poboljšanje brendiranja i korisničkog iskustva. To nije jednostavan zadatak, ali ćete imati više kontrole nad svojom temom.

Jeste^(Were) li uspjeli prilagoditi fontove svoje web-lokacije pomoću koraka prema savjetima u ovom vodiču? Recite^(Tell) nam u komentarima.

How to Change Fonts in WordPress

A great way to add some branding and indіvidualism to your WordPress site is to change the 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

• Kako premjestiti WordPress stranicu s jednog hosta na drugi

• Kako instalirati i postaviti WordPress na Microsoft Azure

• Kako pokrenuti nevjerovatno brz WordPress na Microsoft Azureu

• Kako konfigurirati privatnost u WordPressu i zašto je to važno

• Kako instalirati WordPress na Google Cloud Platformu

• Kako pronaći svoju prijavu administratora za WordPress

• 10 osnovnih WordPress dodataka za web stranicu male tvrtke

• Kako ažurirati PHP u WordPressu

• Kako postaviti vlastitu web stranicu nalik Twitteru koristeći WordPress P2 temu

• Najbolji format pisanja bloga za stjecanje bodova

• Kako koristiti Lumen5 da svoj blog post pretvorite u video

• 3 najbolja SEO dodatka za WordPress

• Kako ubrzati WordPress stranicu u 11 koraka

• Kako učiniti WordPress web mjesto sigurnim

• Kako urediti podnožje u WordPressu

• Što je AMP za WordPress i kako ga instalirati

• Kako duplicirati stranicu u WordPressu

• 11 najboljih WordPress podcast dodataka

• Kako instalirati temu na WordPress

• Kako provjeriti je li web stranica zabranjena za AdSense