Výber písma na webovej stránke je oveľa viac než len estetická voľba. Typografia ovplyvňuje dojem z celej značky, čitateľnosť textu a aj to, ako dlho sa návštevník na stránke zdrží. Môže byť súčasťou obrázka, ale aj esteticky sprostredkovať vlastný obsah stránky. Skvele zvolené písmo vie navodiť emóciu, zvýšiť dôveryhodnosť webu, zlepšiť používateľský zážitok a v neposlednom rade – pomôcť aj SEO. Rýchle načítanie stránky, kontrast, či čitateľnosť textu patria medzi faktory, ktoré ovplyvňujú hodnotenie webu vo vyhľadávačoch.
Kto by to o obyčajnom písme povedal, však?
Zmena písma vo WordPress-e – Google Fonty, plugin či CSS, krok za krokom
článok na blog uverejnený: 7. novembra 2025
Google Fonty (nielen vo WordPress)
Počuli ste už o Google Fonts? V praxi patria medzi často používané nástroje webdizajnérov aj vývojárov. Google Fonts ponúkajú naozaj jednoduchú integráciu a podporu aj vo väčšine WordPress tém a pluginov. Napriek tomu, že na výstupe sú krásne texty, ich používanie nie je len o dizajne – dnes je dôležité aj to, ako ich na stránke implementujete. Nesprávne vloženie môže mať totiž negatívny vplyv na rýchlosť webu a aj na súlad s GDPR. Kto ich nepozná, zoznámte sa…
Čo sú Google Fonts?
Pod označením Google Fonts sa skrýva online knižnica písiem, ktorú vytvorila firma Google, aby uľahčila vývojárom prácu s typografiou.
Prečo sú populárne:
- sú bezplatné a majú otvorenú licenciu,
- nevyžadujú žiadnu inštaláciu,
- sú prezícne spracované a pôsobia pekne, harmonicky
- ponúkajú jednotný dizajn naprieč zariadeniami,
- jednoducho sa integrujú aj bez technických znalostí.
Pozrite sami na tú krásu Až si neviete medzi nimi vybrať, ktorý typ písma použiť 🙂
Ktorý typ písma z Google Fonts použiť? Rozsiahle a vyčerpávajúce informácie nájdete v článkoch na stránke Google Fonts v časti Knowlwdge > Choosing Type. Odporúčam článok A checklist for choosing type (Kontrolný zoznam pre výber typu písma – ak neviete po anglicky zapnite si prekladač v prehliadači).
❤ Milý Google, ďakujeme ti za perfektné články a pekné estetické písma, ktoré si zaplatil a dal svetu zadarmo!
Poznámka: akýkoľvek zástupný text – tu je použitý „Kŕdeľ ďatľov učí koňa žrať kôru“ – si napíšete sami na otestovanie, či písmo vyhovuje vzhľadovo vašim očakávaniam. Nie všetky písma majú zvládnutú správnu typografiu slovenského pripájania ľ a ť tak, aby nekazili vzhľad, sem-tam zblbnú i niektoré iné znaky (napr. ŕ, ĺ, ž).
Spôsoby použitia Google Fontov
Toto by mal poznať každý tvorca web-stránok.
Existujú totiž dva základné prístupy použitia Google fontov – podľa zdroja – externé alebo lokálne načítanie fontov.
Externé načítanie (z Google servera)
Externé načítanie je najčastejší spôsob ako sa Google Fonty používajú. Kvôli jednoduchosti a komfortu.
Stránka načítava písmo priamo z Google serverov. V kóde webu sa nachádza dôkaz o tomto spôsobe načítania napríklad v takejto podobe:
<link href=“https://fonts.googleapis.com/css2?family=Roboto&display=swap“ rel=“stylesheet“>
Výhody:
- rýchla integrácia bez technických znalostí,
- jednoduchá zmena alebo pridanie ďalšieho fontu,
- dostupnosť zo serverov Google po celom svete.
Nevýhody:
- pri každom načítaní sa odosiela IP adresa používateľa do USA → problém s GDPR,
- závislosť od dostupnosti Google serverov,
- zbytočné spomalenie načítania pri viacerých fontoch.
Vzhľadom na to, že tieto písma sú dostupné na viacerých serveroch po svete, načítanie býva väčšinou bezproblémové a používajú ich aj stránky, ktoré majú celosvetovú pôsobnosť. Napriek tomu, že sa tento spôsob často používa, je podľa expertov vhodný pre interné alebo testovacie projekty.
Ak nechcete, aby sa pri každom načítaní písma odosielala IP adresa návštevníka vašej stránky do USA, zmeňte poskytovateľa písiem Google z fonts.googleapis.com na fonts.bunny.net (bunny.net je open-source, zameraný na ochranu súkromia – Bunny Fonts sú zadarmo, iné služby na stránke ako je CDN, video-hosting alebo cloudové úložisko majú platené). Vo výsledku to môžete zrealizovať napríklad takto:
@import url(‚https://fonts.bunny.net/css?family=roboto:400,700‘);
body { font-family: ‚Roboto‘, sans-serif; }
Lokálne načítanie
Lokálne načítanie (self-hosted) je bezpečnejšia a v dnešnej dobe aj odporúčaná možnosť. Fonty si stiahnete z Google Fonts (na obr. modré tlačidlo Get font vpravo hore). Zo stiahnutého súboru vyberiete a rozbalíte súbory s fontom (formát .ttf) a tie uložíte cez FTP do správneho priečinka pre fonty (…/wp-includes/fonts) priamo na svoj webový server.
Výhody:
- plný súlad s GDPR (žiadne údaje sa neposielajú mimo EÚ),
- rýchlejšie načítanie – font sa načíta zo servera spolu s webom,
- nezávislosť od externých služieb.
Nevýhody:
- treba fonty stiahnuť, rozbaľovať a kopírovať, optimalizovať, vložiť manuálne,
- pri zmene témy je potrebné proces s vložením do priečinka a príkaz do Dodatočné CSS zopakovať.
To však ešte nie je všetko.
Súbory s písmami .ttf sú určené predovšetkým pre desktopové použitie vo Worde, Photoshope a pod. Nie sú optimalizované pre web – podľa informácií z GitHubu sú 2-3x väčšie než modernejší formát .woff2. Ich použitie na webe je vhodné len ako záložné písmo pre staršie typy prehliadačov nepodporujúce formát .woff2. Ten je podporovaný od verzie Google Chrome 36, Opera 23, Firefox 39, Edge 14, Safari 12.
Lokálne načítanie písma používajte pre produkčné weby, firemné stránky a e-shopy, na ktorých nevyžadujete súhlas návštevníka s cookies. Umožní vám zostať v súlade s právnymi požiadavkami aj so štandardmi rýchlosti.
Ako získať WOFF2 z Google Fonts?
Spôsob 1: Použite napr. stránku google-webfonts-helper
Vyberiete písmo v menu vľavo a stiahnete jeho .woff2 verziu
Spôsob 2: Extrakciou z CSS
Otvorte napr. pre písmo Roboto adresu https://fonts.googleapis.com/css2?family=Roboto v prehliadači a v CSS nájdite url() odkazy pre latin-ext (kóduje aj slovenské znaky) na .woff2 súbory. Skopírujte adresu a stiahnite font do svojho počítača.
Spôsob 3: Skonvertujte .ttf na .woff2 niektorým online nástrojom
Existuje viacero stránok, ktoré cez webové rozhranie konvertujú formát písma z jedného na druhý. Väčšinou vás na nich otravuje množstvo reklamy, keďže služba je zadarmo. Medzi „menej reklamné“ patrí napr. fontconverter.io
Obsah výsledného súboru .woff2 s písmom si môžete pozrieť napr. cez stránku FontDrop!
Nezabudnite ho uložiť na svoj webový server cez ftp do priečinka pre fonty (…/wp-includes/fonts).
Ak chcete, aby sa písma zobrazovali návštevníkom webu, treba ešte WordPressu „dohovoriť“, aby ich používal – cez Vzhľad → Prispôsobiť → Dodatočné CSS napríklad takýmto príkazom:
@font-face {
font-family: ‚Roboto‘;
src: url(‚/fonts/roboto.woff2‘) format(‚woff2‘),
url(‚/fonts/roboto.ttf‘) format(‚truetype‘);
font-display: swap;
}
Ako legálne a správne používať Google Fonty
V roku 2022 nemecký súd rozhodol, že externé načítanie Google Fontov bez súhlasu používateľa porušuje GDPR, pretože prenáša IP adresy do USA.
Odvtedy je pre stránky, ktoré inak súhlas používateľa nepotrebujú (ak nemerajú návštevnosť stránky používaním služieb tretej strany, napr. Googlu), jednoduchšie používať lokálne uložené písma.
Ako zistiť, či váš web načítava fonty externe? V prehliadači stlačte na skúmanej stránke Ctrl-U. V prípade, že uvidíte v kóde odkazy na fonts.googleapis.com alebo fonts.gstatic.com, web načítava písma externe.
Riešenie situácie je jednoduché. Ak používate písma externe, vyžiadajte si súhlas návštevníkov so spracovaním údajov treťou stranou. Alebo zmeňte používanie písma na interné – v nasledujúcich odsekoch zistíte, ktorý spôsob zmeny je pre vás najvhodnejší.
Možnosti zmeny písma vo WordPress
WordPress ponúka hneď niekoľko spôsobov, ako zmeniť písmo na vašom webe. Líšia sa náročnosťou, flexibilitou aj tým, ako ovplyvňujú výkon a údržbu webu. Texty, ktoré sú súčasťou obrázka ako na obrázku nižšie, ani jedným z nich nezmeníte. To je možné len zmenou obrázka.
V tejto časti sa venujeme spôsobom zmeny písma na stránke, nie nastaveniu jeho lokálneho použitia.
Poďme si prejsť postupne spôsoby ako zmeniť písmo na stránke.
Zmena písma priamo v nastaveniach témy
Najjednoduchšia a najrýchlejšia možnosť – ak ju vaša téma podporuje.
V administrácii WordPressu prejdite na Vzhľad → Prispôsobiť (Customizer) → Typografia.
Niektoré moderné témy, ako Sydney, Astra, OceanWP, GeneratePress (aj v bezplatnej verzii), umožňujú upravovať typografiu – nastaviť typ písma i jeho veľkosť pre základný text stránky, pre nadpisy, menu či tlačidlá. Prémiové témy ako Divi alebo Avada idú ešte ďalej – ponúkajú vizuálny editor, kde vidíte zmeny fontu v reálnom čase.
Výhody:
- rýchla a bezpečná úprava bez potreby kódovania,
- intuitívne rozhranie priamo v administrácii,
- ideálne pre menšie weby, blogy a pre tých, ktorí sa nechcú púšťať do CSS.
Nevýhody:
- obmedzené možnosti – fonty závisia od ponuky konkrétnej témy,
- niektoré zmeny (napr. v pluginoch alebo vlastných blokoch) sa týmto spôsobom neupravia,
- pri zmene témy sa môžu nastavenia stratiť
Ukážka nastavení písma, ktoré sú súčasťou témy Sydney (aj v neplatenej verzii), pre text na stránke.
V nastaveniach je použitý výraz hrúbka písma, v typografii sa používa odborný výraz rez písma. Rez písma je verzia kresby písma – rez môže byť základný (regular), slabý duktus (light), tučný duktus (bold), zúžená verzia (condensed), kurzíva (italic),…
Štýl písma je prednastavený normálny, v téme Sydney je k dispozícii ešte napríklad kurzíva (italic – hoci ju možno voliť priamo v rezoch ako samostatný rez písma) a oblique (písmo so šikmým, nezvislým vzhľadom, vytvorené naklonením tvarov písmen bežného písma). Najbežnejšie štýly písma bývajú obrysové písmo (outline), kapitálky (text veľkými písmenami, prvé písmeno ešte väčšie), prečiarknutý a i.
Použitie pluginu na zmenu písma
Ak vaša téma neumožňuje zmenu fontu priamo, pomôžu vám špecializované pluginy. Medzi najpoužívanejšie patria zobrazené na obrázku. plus Use Any Font, Local Google Fonts. Ďalšie nájdete zadaním kľúčového slova „Google Fonts“ do vyhľadávacieho okienka pluginov. Väčšina z nich integruje Google Fonty a umožní vám vybrať si písmo priamo v časti Vzhľad → Prispôsobiť – bez potreby editovať CSS.
Ako to funguje:
Plugin do stránky pridá prepojenie na zvolený font (zvyčajne z Google Fonts) a umožní vám ho priradiť k rôznym častiam webu – napr. k nadpisom, odsekom či menu.
Výhody:
- jednoduchá inštalácia,
- široký výber písiem,
- vhodné aj pre menej technicky zdatných používateľov.
Nevýhody:
- takmer každý plugin znamená vyššiu záťaž na výkon webu,
- pri externom načítavaní Google Fontov môže vzniknúť problém s GDPR (odosiela sa IP adresa používateľa do USA),
- pri zmene témy sa nastavenia nemusia preniesť.
Na obrázku sú najpoužívanejšie pluginy na vloženie a správu písma na web-stránke: Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts, OMGF (Optimize My Google Fonts) | GDPR/DSGVO Compliant, Faster Google Fonts a Custom Fonts – Host Your Fonts Locally. Každý má stotisíce aktívnych inštalácií.
Zmena písma cez vlastné CSS
Pre tých, ktorí chcú mať nad vzhľadom úplnú kontrolu, existuje možnosť upraviť písmo priamo v štýloch.
Ako prvý krok je nevyhnutnosť stiahnuť a optimalizovať zvolený typ písma a uložiť ho cez FTP na svoj web-server do priečinka fontov (…/wp-includes/fonts). Následne v administrácii prejdite na Vzhľad → Prispôsobiť → Dodatočné CSS, alebo – ak robíte rozsiahlejšie zmeny – použite detskú tému (child theme).
Základnú štruktúru príkazu na definovanie fontu na stránke vidno z príkazov v časti o Google písmach vyššie. Tu je príkaz v prepracovanejšej podobe, ktorá definuje okrem základného písma (Open Sans) i použitie iného písma (Montserrat) pre nadpisy úrovní h1 – h3.
body {
font-family: ‚Open Sans‘, Arial, sans-serif;
}
h1, h2, h3 {
font-family: ‚Montserrat‘, sans-serif;
}
Výhody:
- absolútna flexibilita,
- žiadny ďalší plugin ani závislosť od témy,
- ideálne pre prispôsobenie detailov.
Nevýhody:
- vyžaduje znalosť CSS,
- pri aktualizácii témy sa úpravy môžu stratiť (ak nie sú v child theme),
- chybný zápis môže ovplyvniť vzhľad celého webu.
Optimalizácia výkonu a fallback písma
Pri práci s písmami je dôležité myslieť nielen na estetiku, ale aj na výkon a používateľský zážitok. Fonty môžu tvoriť relatívne veľké objem načítavaných údajov (najmä ak ich je viac) a načítavanie môže spomaliť zobrazenie stránky. Preto je potrebné pristupovať k nim strategicky a s ohľadom na návštevníkov webu.
Kľúčovým nástrojom je CSS príkaz font-display: swap. Príkaz zabezpečí, že text stránky sa zobrazí okamžite, aj keď sa vlastné písmo ešte nenačítalo. V prípade spomaleného načítania prehliadač najprv ukáže text v náhradnom, záložnom písme a keď je váš font pripravený, elegantne ho vymení. Návštevník stránky tak môže začať čítať obsah už pred načítaním vlastného písma stránky bez čakania.
Fallback písma (záložné písmo) je druhým pilierom dobrej optimalizácie. V príkaze font-family vždy uveďte aj záložné možnosti, napríklad
font-family: ‚Open Sans‘, Arial, sans-serif
Prvý font je váš vlastný, druhý je systémový (ktorý má každý v počítači) a posledný je generická kategória fontov použitého prehliadača.
Ak z akéhokoľvek dôvodu zlyhá načítanie hlavného písma stránky Open Sans, obsah sa zobrazí písmom Arial. Ak by zlyhalo aj jeho načítanie, použije sa niektoré z písiem generickej kategórie použitého prehliadača – v našom prípade niektoré bezpätkové písmo, pre Windows to býva často Segoe UI.
BTW – dvojslovné názvy písiem sa píšu do úvodzoviek alebo apostrofov 😉
A stránka zostane perfektne čitateľná.
Na rýchlosť načítania webu má priamy vplyv aj počet písiem na stránke. Každé písmo znamená ďalší súbor na stiahnutie. Ideálne je obmedziť vzhľad stránky, resp. webu na 2-3 fonty – napríklad jeden pre nadpisy a jeden pre bežný text. Príliš veľa rôznych písiem nielen spomaľuje načítavanie, ale pôsobí aj vizuálne neprehľadne a neprofesionálne. Písmo môže mať pekný vplyv nielen na celkový dojem z webu, ale aj na hodnotenie rýchlosti v Core Web Vitals.
Poznámka pred záverom – po výbere a úspešnom nainštalovaní písma ho nezabudnite skontrolovať na desktope, tablete i na mobiloch. Aby ste nespravili prácu zbytočne a návštevníkom sa stránka nebude páčiť.
Zhrnutie
Zmena písma vo WordPress-e sa dá zvládnuť viacerými spôsobmi – od rýchlych úprav v administrácii cez pluginy až po pokročilé riešenia s vlastným CSS. Každá metóda má svoje miesto, výhody aj obmedzenia. Dôležité je vybrať tú, ktorá najlepšie zodpovedá typu vášho webu, technickým znalostiam a požiadavkám na výkon či správu.
Bez ohľadu na zvolený spôsob platí, že písmo by malo podporovať značku, malo by byť ľahko čitateľné a optimalizované pre rýchlosť načítania. Správna typografia je nielen o štýle, ale aj o funkčnosti – a ak ju vo WordPresse dobre nastavíte, vaša stránka bude pôsobiť profesionálnejšie, modernejšie, používateľsky príjemnejšie a bude aj po technickej stránke vyhovovať predpisom.
autorom článku je: Ján Tóth
- absolvent FEI STU a FM UK. Po ukončení štúdia pracoval rok vo vydavateľstve ako vedúci IT, následne na vedúcich pozíciách súkromných firiem a tiež ako riaditeľ slovenského zastúpenia nadnárodnej spoločnosti. Je doma v MS Office, ktorý používa na dennej báze, pracuje s nástrojmi umelej inteligencie, s grafickými nástrojmi, navrhuje a spravuje webstránky, tvorí ich obsah, venuje sa i marketingu. Autor a spoluautor publikácií z oblasti IT, článkov z oblasti IT, zdravia a kozmetiky, autor viacerých kurzov, prekladateľ, prednášateľ, v súčasnosti pracuje ako lektor v IT LEARNING SLOVAKIA a konzultant.
Páčil sa vám článok? Pošleme vám podobné.
Aktivujte si okamžité zasielanie noviniek a článkov – už vám od nás nikdy nič neunikne. Môžeme vás okamžite informovať o aktuálnej akcii, novinke, špeciálnej kampani či zľave alebo novom článku na našom blogu. Akonáhle sa u nás v novinkách niečo zmení alebo pridá, do pár minút vám automaticky posielame email s odkazom na novinku na našu stránku. A odhlásiť sa môžete kedykoľvek. Nič neriskujete.
Nikam neodchádzajte, pozrite si naše novinky, akcie alebo si
prečítajte ďalšie podobné články:
Podobné články z kategórie
Kurz Wordpress, písmo
