Skvelý spôsob, ako pridať trochu značky a individualizmu na váš web WordPress , je zmeniť písma vo vašej téme.

Typografia a ďalšie prvky vytvárania pásov vytvárajú dobrý prvý dojem, vytvárajú náladu pre návštevníkov vašej stránky a vytvárajú identitu vašej značky. Štúdie^(Studies) tiež zistili, že písma ovplyvňujú schopnosť čitateľov učiť sa, pamätať si informácie a zapamätať si texty.

Ak ste si práve nainštalovali tému WordPress^{(installed a WordPress theme)} alebo máte nejaké skúsenosti s CSS a kódovaním, ukážeme vám niekoľko možností, ktoré môžete použiť na zmenu písma vo WordPress .

Ako zmeniť písma vo WordPress^{(How to Change Fonts in WordPress)}

Existujú tri hlavné možnosti, ako zmeniť písma vo WordPress:

• Používajte webové písma ako Google Fonts , Fonts.com alebo Adobe Edge Web Fonts , ktoré sú hosťované na webe tretej strany
• Kódujte^(Code) webové písma do svojej témy a zaraďte ich do frontu
• Hostite^(Host) písma na svojej stránke a pridajte ich do svojej témy

1. Ako zmeniť písma vo WordPress pomocou webových písem^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Používanie webových písiem je jednoduchší a rýchlejší spôsob zmeny písiem vo WordPress ako sťahovanie a nahrávanie súborov písiem.

Vďaka tejto možnosti máte prístup k rôznym typom písiem^{(access a variety of fonts)} bez toho, aby ste ich aktualizovali pri každej zmene a nezaberali miesto na serveri na vašom hostingu. Písma sa poskytujú priamo zo serverov poskytovateľa pomocou doplnku alebo pridaním kódu na vašu stránku.

Uistite^(Make) sa, že webové písma, ktoré si vyberiete pre svoju stránku, zodpovedajú identite vašej značky, sú ľahko čitateľné pre hlavný text, sú známe návštevníkom webových stránok a poskytujú typ nálady a obrazu, ktorý chcete.

Webové písma môžete pridať pomocou doplnku WordPress^{(using a WordPress plugin)} alebo manuálne pridaním niekoľkých riadkov kódu na svoju stránku. Poďme preskúmať obe možnosti.

Ako pridať webové písma pomocou doplnku WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

V závislosti od webového písma, ktoré ste si vybrali, môžete použiť doplnok WordPress na prístup ku knižnici písiem a vybrať si to, ktoré chcete na svojom webe. Pre túto príručku sme si vybrali Google Fonts a použili sme doplnok Google Fonts Typography .

1. Ak chcete začať, prihláste sa do svojho administračného panela WordPress a vyberte položku Plugins > Add New .

1. Do vyhľadávacieho poľa zadajte typografiu písma Google^{(Google Fonts Typography)} a vyberte možnosť Inštalovať teraz^{(Install Now)} .

1. Vyberte položku Aktivovať^(Activate) .

1. Potom prejdite k nástroju na prispôsobenie^(Customizer) tak, že prejdete na Appearance > Customize .

1. Vyberte sekciu Písma Google .^{(Google Fonts)}

1. Potom kliknutím na odkaz otvorte nastavenia písiem a nakonfigurujte ich takto:

• V časti Základné nastavenia^{(Basic Settings)} nastavte predvolené písmo pre hlavný text, nadpisy a tlačidlá.

• V časti Rozšírené nastavenia^{(Advanced Settings)} nakonfigurujte názov a popis lokality, ponuku, nadpisy a obsah, bočný panel a pätu.

• Zrušte začiarknutie^(Uncheck) všetkých nežiaducich hmotností písma v sekcii Načítanie písma^{(Font Loading)} , aby ste predišli spomaleniu vašej stránky^{(avoid slowing down your site)} .

Ak sa na vašej lokalite nachádzajú písma, ktoré sa nezobrazujú alebo nefungujú správne, použite na riešenie problémov sekciu Ladenie .^{(Debugging )}

1. Tieto nastavenia môžete otestovať v nástroji na prispôsobenie^(Customizer) , aby ste sa uistili, že fungujú tak, ako chcete, a potom vyberte možnosť Publikovať^(Publish) .

Poznámka^(Note) : Ak zabudnete vybrať možnosť publikovať v nástroji na prispôsobenie^(Customizer) , stratíte všetky zmeny, ktoré ste vykonali.

Ako pridať webové písma pomocou kódu^{(How to Add Web Fonts Using Code)}

Webové písma môžete nainštalovať a používať, ak máte prístup ku kódu svojej témy. Toto je manuálna alternatíva k pridaniu dodatočného doplnku, ale nie je to komplikované, ak budete postupovať podľa krokov pozorne.

Ak však používate tému z adresára tém WordPress alebo prispôsobenú tému, musíte vykonať rôzne kroky.

Ak ste si kúpili tému z adresára tém WordPress , vytvorte podradenú tému^{(create a child theme)} a potom jej dajte súbor style.css a funkcie.php. Je to jednoduchšie, ak máte prispôsobenú tému, pretože môžete upravovať súbor so štýlmi a funkciami z vašej témy.

1. Ak chcete začať, vyberte písmo z knižnice Google Fonts a kliknutím na ikonu ^{(Google Fonts)}+ (plus) ho pridajte do svojej knižnice.

1. Potom vyberte kartu v dolnej časti, kde nájdete kód, ktorý chcete pridať na svoje stránky. Prejdite do časti Vložiť písmo^{(Embed font)} na karte Vložiť^(Embed) . Nájdete kód vygenerovaný aplikáciou Google Fonts^{(Google Fonts)} , ktorý vyzerá asi takto:

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

Poznámka^(Note) : Pre túto príručku sme vybrali Work Sans , takže názov písma sa môže líšiť od vášho v závislosti od toho, čo ste si vybrali.

1. Skopírujte túto časť kódu: https://fonts.googleapis.com/css2?family=Work+Sans

To vám umožní zaradiť štýl zo serverov Google Fonts , aby ste zabránili konfliktu s doplnkami tretích strán. Umožňuje tiež jednoduchšie úpravy detskej témy.

1. Ak chcete zaradiť písmo do frontu, otvorte súbor funkcií a pridajte nasledujúci kód. ( Nahraďte^(Replace) odkaz odkazom, ktorý získate 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. Môžete pridať nový riadok do svojej funkcie alebo do rovnakého riadku, ak chcete v budúcnosti pridať ďalšie písma, a to takto:

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

V tomto prípade sme zaradili do radu písma Cambria aj Work Sans .

Ďalším krokom je pridanie písma do šablóny so štýlmi vašej témy, aby písmo fungovalo na vašej lokalite.

1. Ak to chcete urobiť, otvorte súbor style.css vašej témy a pridajte kód na úpravu jednotlivých prvkov pomocou webových písiem takto:

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

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

V tomto prípade bude hlavným písmom Work Sans , zatiaľ čo prvky hlavičky ako h1, h2 a h3 budú používať Cambria .

Po dokončení uložte šablónu so štýlmi a skontrolujte, či vaše písma fungujú tak, ako by mali. Ak nie, skontrolujte, či písma nie sú v šablóne so štýlmi prepísané, alebo vymažte vyrovnávaciu pamäť prehliadača a skúste to znova.

1. Majte nainštalované záložné písmo, aby ste zabezpečili, že písma budú ľahko vykresľované alebo prístupné, najmä pre používateľov so starými zariadeniami, slabým pripojením alebo ak má poskytovateľ písma technické problémy. Ak to chcete urobiť, prejdite na šablónu so štýlmi a upravte CSS takto:

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

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

Ak je všetko v poriadku, návštevníci vašej stránky uvidia vaše predvolené webové písma, v našom prípade Work Sans a Cambria . Ak sa vyskytnú problémy, uvidia záložné písma, v našom prípade napríklad Arial alebo Times New Roman .

2. Ako zmeniť fonty vo WordPress hostingom fontov^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Hostenie písiem na vašich vlastných serveroch vám pomáha optimalizovať výkon vašich webových písiem, ale je to aj bezpečnejší spôsob^{(a more secure way)} , ako to robiť namiesto získavania zdrojov zo stránok tretích strán.

Písma Google^(Google) a ďalšie webové písma vám umožňujú sťahovať písma na použitie ako lokálne hostené písma, ale stále si môžete do svojho počítača stiahnuť ďalšie písma za predpokladu, že vám to umožňujú licencie.

1. Ak chcete začať, stiahnite, rozbaľte, nahrajte súbor s písmom na svoju stránku a potom ho prepojte vo svojej šablóne so štýlmi. V tomto prípade nemusíte fonty zaraďovať do frontu v súbore functions.php, ako ste to urobili pri webových fontoch. Pred použitím na svojej webovej lokalite sa uistite , že súbory, ktoré odovzdávate, sú vo formáte .woff .

1. Ďalej prejdite na wp-content/themes/themename a odovzdajte súbor písma do svojej témy. 
2. Otvorte šablónu so štýlmi a pridajte nasledujúci kód (v tomto prípade používame písmo Work Sans , ale môžete ho nahradiť vlastnými písmami):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
štýl písma: normálny; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
štýl písma: normálny; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
štýl písma: normálny; ^{( font-style: normal;)}
}

Poznámka^(Note) : Používanie @fontface vám umožňuje používať tučné písmo, kurzívu a iné variácie vášho písma, po ktorých môžete určiť váhu alebo štýl každého písma.

1. Potom pridajte štýl pre svoje prvky takto:

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

Prispôsobte si typografiu WordPress^{(Customize Your WordPress Typography)}

Zmena písma vo WordPress je skvelý nápad na zlepšenie značky a používateľského zážitku. Nie je to jednoduchá úloha, ale budete mať väčšiu kontrolu nad svojou témou.

Podarilo^(Were) sa vám prispôsobiť písma vašej lokality pomocou krokov podľa tipov v tejto príručke? Povedzte^(Tell) nám to v komentároch.

How to Change Fonts in WordPress

A great way to add 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

• Ako presunúť web WordPress z jedného hostiteľa na druhého

• Ako nainštalovať a nastaviť WordPress na Microsoft Azure

• Ako spustiť bleskovo rýchly WordPress na Microsoft Azure

• Ako nakonfigurovať súkromie vo WordPress a prečo je to dôležité

• Ako nainštalovať WordPress na Google Cloud Platform

• Musíte mať nastavenia WordPress Yoast SEO 2022

• Ako používať WP Super Cache na blogu WordPress

• Ako manuálne nastaviť WordPress na doméne

• Ako zvýšiť výkon vo WordPress prostredníctvom vyčistenia databázy

• Ako nájsť prihlasovacie meno správcu WordPress

• Najlepší formát na písanie blogu na získanie bodov

• Ako nainštalovať tému na WordPress

• Vytvorenie detskej témy vo WordPress

• Wix vs WordPress: Čo je najlepšie na vytvorenie vášho webu?

• Čo je to AMP pre WordPress a ako ho nainštalovať

• Ako zaistiť bezpečnosť stránky WordPress

• Ako si vytvoriť vlastné vyskakovacie okno s kupónom vo WordPress

• Ukážte úryvok na domovskej stránke blogu WordPress

• WordPress pri nahrávaní obrázkov zobrazuje chybu HTTP

• 10 základných doplnkov WordPress pre webovú stránku pre malé firmy