V tomto článku nápovědy WordPress vás krok za krokem provedu procesem přidávání vlastních písem do vašich blokových motivů WordPress. To znamená, že do JAKÉHOKOLI motivu můžete přidat JAKÉKOLI fonty, jako je například přidání Google Fonts do motivu Twenty Twenty Three.
Ukážu vám, jak tento úkol splnit pomocí pluginu Create Block Theme vyvinutého přímo týmem vývojářů WordPress. Díky tomu je plugin ultra lehký, vysoce výkonný a velmi snadno použitelný s blokovými motivy.
Pomocí této metody můžete buď odkazovat na fonty (tj. odkaz na Google Fonts), nebo vkládat fonty lokálně na svůj web (pro lepší výkon webu). Jdeme do toho!
Video: Přidejte do WordPressu vlastní písma
1. Nainstalujte plugin „Create Block Theme“.
Pro začátek se budete chtít přihlásit do své administrační oblasti WordPress, která vás zavede na Dashboard. Odtud přejděte v hlavní navigaci na Pluginy>Přidat nový (červená šipka na obrázku výše).
Vyhledejte plugin „Create Block Theme“ pomocí vyhledávací lišty v pravém horním rohu (na obrázku výše zvýrazněna zeleně). Jakmile se zobrazí plugin Create Block Theme, klikněte na tlačítko „Install Now“ a nainstalujte jej na svůj web (červená šipka).
Poté kliknutím na tlačítko „Aktivovat“ aktivujte plugin.
2. Zakázat bezpečnostní plugin (dočasně)
Aby zbytek tohoto procesu proběhl hladce, budete muset dočasně zakázat všechny nainstalované bezpečnostní pluginy, které blokují možnost uživatelů upravovat motivy nebo pluginy.
V mém konkrétním případě používám plugin SG Security (který je dodáván se všemi weby WordPress hostováno přes Siteground – hostitele, kterého vřele doporučuji). S jistotou vím, že tento plugin zasahuje do procesu přidávání vlastních písem, takže zakážu nastavení, které překáží.
V tomto případě přejdu do sekce „Site Security“ pluginu SG Security pomocí hlavní navigace (červená šipka na obrázku výše).
Dále přejdu dolů k možnosti označené „Zakázat editor motivů a pluginů“ (na obrázku výše zvýrazněna zeleně). Napravo od této možnosti uvidíte přepínač – kliknutím na přepínač tuto funkci deaktivujete (červená šipka). V pravém rohu modré šipky by se měla zobrazit zpráva „Úspěch“.
Když je náš bezpečnostní plugin dočasně deaktivován, můžeme přejít k dalšímu kroku výběru a nahrání písem, která chceme na našem webu používat.
Existují dvě možnosti použití vlastních písem ve WordPressu.
3. Vyberte Vlastní písma pro WordPress (propojená písma Google)
První možností je odkaz na písma na webu třetí strany, Google Fonts. Tato možnost je jednodušší a její nastavení zabere méně času, ale zpomaluje rychlost načítání stránky vašeho webu. Také vás omezuje na písma dostupná z Google Fonts (ačkoli Google nabízí spoustu skvělých bezplatných písem). Pokud jste méně technicky zdatní a nevadí vám používat Google Fonts, doporučuji tuto možnost.
Pro začátek přejděte na „Vzhled>Spravovat písma motivu“ z hlavní navigace (červená šipka na obrázku výše).
V pracovní oblasti „Spravovat písma motivu“ uvidíte všechna výchozí písma aktuálně nainstalovaná ve WordPressu (na obrázku výše zvýrazněna zeleně). Vaše písma jsou také uvedena na pravé straně pracovní oblasti spolu s různými variantami každého písma a velikostí souboru pro každou variantu písma (zvýrazněny modře).
Chcete-li do motivu přidat nové písmo, klikněte na tlačítko „Přidat písmo Google“ (červená šipka).
Klikněte na rozevírací seznam „Vybrat písmo“ a vyhledejte písmo Google, které chcete přidat na svůj web (písma jsou v abecedním pořadí). Pokud si nejste jisti, jak jednotlivé fonty vypadají, doporučuji procházením webu Google Fonts prozkoumat písma a otestovat je. Jakmile najdete písmo, které chcete použít, vyberte jej z rozevírací nabídky (modrá šipka).
Nyní uvidíte seznam všech dostupných variant, které můžete nainstalovat do svého motivu pro dané písmo. Můžete buď zaškrtnout políčko vedle jednotlivých variant, nebo kliknutím na horní zaškrtávací políčko (červená šipka na obrázku výše) vybrat všechny varianty. Na pravé straně obrazovky uvidíte seznam vybraných variant spolu s jejich velikostí souboru. Až budete připraveni, klikněte na „Přidat písma Google do motivu“ (zelená šipka).
Nyní byste měli v horní části pracovní oblasti vidět zprávu, že písmo bylo nainstalováno do vašeho motivu (v tomto případě do motivu Twenty-Twenty Three). Poté můžete kliknout na odkaz „Spravovat písma“ v okně se zprávou o úspěchu nebo kliknutím na malou šipku zpět (červená šipka na obrázku výše) se vrátit do pracovní oblasti „Spravovat písma motivu“.
Nyní uvidíte svou nově nainstalovanou rodinu písem v seznamu se zbytkem písem vašeho motivu (červená šipka na obrázku výše). Na pravé straně pracovní plochy (zvýrazněno zeleně) také uvidíte svou rodinu písem a všechny její přidružené varianty písem.
4. Vložení vlastních písem pro WordPress (místní písma pro lepší SEO)
Druhou možností, jak přidat písma na váš web WordPress, je „vložit“ nebo „místně hostit“ vaše písma. Jinými slovy, vaše soubory písem budou umístěny na stejném webovém serveru, který hostí váš web.
Výhodou této metody je, že nevyžaduje načítání písem z domény třetí strany. V důsledku toho se vaše písma načítají rychleji, a tím i vaše webová stránka. Rychlejší načítání webových stránek je lepší pro uživatelský dojem, což znamená, že může pomoci vašemu webu umístit se výše ve vyhledávačích a získat větší návštěvnost.
Jinými slovy, vložená písma jsou lepší pro SEO (optimalizaci pro vyhledávače).
I když tato metoda vyžaduje několik kroků navíc, je stále poměrně snadná a používá stejný plugin, který jsme nainstalovali dříve (plugin Create Block Themes).
Chcete-li fonty nainstalovat lokálně, začněte tím, že v hlavní navigaci přejdete na Vzhled>Spravovat písma motivu (pokud tam již nejste od posledního kroku – modrá šipka na obrázku výše). Dále klikněte na tlačítko „Přidat místní písmo“ v pravém horním rohu pracovní oblasti (červená šipka).
Dostanete se do oblasti „Místní písma“, kde můžete vybrat soubor z počítače, který chcete nahrát do svého motivu. Pod tlačítkem „Vybrat soubor“ uvidíte seznam podporovaných formátů souborů písem. Tyto formáty můžete získat z jakéhokoli důvěryhodného webu s písmy, včetně Google Fonts.
Najděte a stáhněte si písmo podle výběru z Google Fonts
Přeskočím na Google Fonts a pomocí vyhledávací lišty (červená šipka) vyhledám písmo, které chci – v tomto případě písmo „Katamarán“. Jakmile bude písmo uvedeno ve výsledcích, kliknutím na něj zobrazím stránku písma (zelená šipka).
Dále kliknu na tlačítko „Stáhnout rodinu“ a stáhnu si toto písmo a všechny jeho varianty do počítače. Chcete-li zobrazit všechny dostupné varianty tohoto písma, můžete se na stránce písem posouvat dolů.
Kliknutím na „Uložit“ uložíte soubor zip s písmem do počítače.
Rozbalte složku písem a získejte přístup k souborům písem
Po dokončení stahování klikněte na šipku vedle dokončeného stahování (červená šipka) a klikněte na „Zobrazit ve složce“ (zelená šipka).
Klikněte pravým tlačítkem na soubor zip v průzkumníku souborů a klikněte na „Extrahovat vše“.
Zobrazí se vyskakovací okno, které vám ukáže, kde se písma extrahují (červená šipka). Toto umístění můžete změnit, pokud chcete, jinak klikněte na tlačítko označené „Extrahovat“ (zelená šipka). Tím se rozbalí složka a v počítači se vytvoří nový soubor se všemi rozbalenými soubory písem. Tato složka by se měla otevřít automaticky.
Pokud jste stáhli soubory písem pomocí Google Fonts, zadejte složku označenou jako „static“ a zobrazte všechny soubory písem. V opačném případě jednoduše vyhledejte všechny soubory, které jsou OTF, TTF, WOFF nebo WOFF2.
Uvnitř této „statické“ složky uvidíte seznam všech variant písem, které jsme stáhli pro písmo Catamaran z Google Fonts. Existuje celkem 9 variant a můžeme je nahrát všechny na naše webové stránky nebo jen varianty, které chceme/potřebujeme. Klikněte na umístění složky v průzkumníku souborů (zelená šipka), poté klikněte pravým tlačítkem a vyberte „Kopírovat“.
Nahrajte svá vlastní písma na WordPress
Přejděte zpět na WordPress, kde máte otevřenou pracovní oblast „Místní písma“. Kliknutím na tlačítko „Vybrat soubor“ (červená šipka na obrázku výše) vyberte písma. Můžete ručně přejít do umístění v počítači, kde jsou uložena vaše písma. Nebo jednoduše klikněte na adresní řádek v průzkumníku souborů (modrá šipka), odstraňte adresu, která se tam aktuálně nachází, poté klikněte pravým tlačítkem a vyberte „Vložit“ (zelená šipka). Tím se vloží adresa, kterou jste zkopírovali v předchozím kroku. Stiskněte klávesu Enter a dostanete se do složky s vašimi fonty.
Varianty písem musíte nahrát jednu po druhé. Pro tento příklad jednoduše nahraji variaci písma „Catamaran-Regular“ kliknutím na ni (zelená šipka) a poté kliknutím na tlačítko „Otevřít“ (červená šipka).
Nyní byste měli vidět informace pro „NÁZEV PÍSMA“, „STYL PÍSMA“ a „VÁHA PÍSMA“ a také náhled písma na pravé straně. Kliknutím na „Nahrát písmo do motivu“ (červená šipka) nahrajete variantu písma.
Zobrazení vlastních písem motivů
Nyní byste měli vidět zprávu o úspěchu v horní části pracovní oblasti (na obrázku výše zvýrazněna zeleně). Gratulujeme – vaše vlastní písmo je nyní nahráno do vašeho motivu jako místní písmo! Můžete pokračovat kliknutím na „Vybrat soubor“ a nahrát tolik variant písem, kolik chcete.
Po dokončení klikněte na odkaz „Spravovat písma“ v okně se zprávou o úspěchu nebo na šipku zpět (označenou červenou šipkou) a vraťte se do pracovní oblasti Správa písem motivu.
Nyní uvidíte novou rodinu písem „Katamarán“ uvedenou spolu se zbytkem rodin písem vašeho motivu (červená šipka). Na pravé straně okna Spravovat písma motivu (zvýrazněno zeleně) navíc uvidíte rodinu písem a všechny nainstalované varianty.
5. Změňte písma motivu na svá vlastní písma
Nyní, když máte nainstalovaná nová písma, je čas na zábavnou část!
Chcete-li změnit písma svého motivu na vlastní písma, přejděte do Editoru webu tím, že přejdete na Vzhled>Editor (červená šipka na obrázku výše).
Klepnutím kamkoli do oblasti hlavního obsahu (červená šipka) editoru webu vyvolejte ovládací prvky.
V horní nabídce klikněte na ikonu „Styles“ (modrá šipka). Poté klikněte na „Typografie“ (červená šipka).
V části „Prvky“ můžete změnit písmo pro text, odkazy, nadpisy nebo tlačítka. Pro tento příklad vyberu možnost „Nadpisy“.
Nyní uvidíte rozbalovací nabídku v části „Typografie“, kde si můžete vybrat libovolné písmo motivu (červená šipka). Zde jsou uvedeny fonty „Neuton“ a „Katamarán“, které jsem přidal pro tento tutoriál. Jako písmo nadpisu vyberu „Neuton“.
Změny uložíte kliknutím na tlačítko „Uložit“ v pravém horním rohu.
Klikněte na „Uložit“ ještě jednou (červená šipka) a vaše vlastní písmo bude nyní uloženo pro všechny nadpisy na vašem webu!
Dále můžete kliknout na odkaz Zobrazit>Zobrazit web v pravém horním rohu editoru webu (červené šipky na fotografii výše), abyste viděli, jak váš web vypadá s vaším novým písmem. Vraťte se do Editoru webu a opakujte tento proces pro všechny další prvky, jejichž písmo chcete přizpůsobit.
Chcete-li se vrátit do oblasti správy WordPress, klikněte na logo v levém horním rohu editoru webu (zelená šipka) a poté znovu klikněte na logo.
6. Jak odstranit vlastní písma z WordPressu
Chcete-li odstranit jakékoli ze svých vlastních písem, začněte přechodem zpět na Vzhled>Spravovat písma motivu.
Celou rodinu písem můžete smazat tak, že najedete myší na pravou stranu názvu rodiny písem a kliknete na ikonu koše, která se zobrazí (modrá šipka). Nebo najeďte myší na jednotlivé varianty písma a klikněte na ikonu koše (varianty písma jsou umístěny uvnitř zeleně zvýrazněné oblasti). Můžete také kliknout na odkaz „Odebrat rodinu písem“ a odstranit kteroukoli rodinu písem (fialová šipka).
To je pro tento tutoriál! Pokud se vám to líbilo, můžete se podívat na můj druhý Články nápovědy WordPress nebo se zapište do mého WordPress Masterclass na Udemy.
