Webové zákusky

Lokální fonty v DIVI

25. 4. 2022

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom případě je stahuje ze serveru, kde jsou uloženy, což může být někdy nechtěné. Několik důvodů, proč chtít lokální fonty:

  1. Cookie lišta – Google fonts jsou právě jednou z položek, která spadá pod kategorii „marketingových“ cookies. Pokud máte celý web bez cookies, je škoda mít lištu jen kvůli nim.
  2. Font není k dispozici v DIVI „knihovně“ fontů, ať už z jakéhokoli důvodu.
  3. Kvůli rychlosti načítání (ač je tenhle bod někdy sporný…).
  4. Dostupnost – lokálně uložené fonty budou prostě dostupné vždy, pokud jejich adresa bude platná.
  5. a další.

Lokální fonty

Jak na to? V DIVI je možnost vložit vlastní lokální fonty i bez pluginu – tady je k tomu odpovídající postup:

1) V editaci stránky/příspěvku (pomocí DIVI builderu) klikněte na nějaký textový modul (resp. modul, kde se dá nastavit font písma, což je skoro každý):

Lokální fonty - nahrávání fontu

2) V záložce Design klikněte na výběr fontu:

Lokální fonty - nahrávání fontu

3) Otevře se modální okno, kde uvidíte tlačítko „Upload:

Lokální fonty - nahrávání fontu

4) Nastavíte jméno fontu, vložíte ho z disku a vyberete, které řezy podporuje.

Pozn. Někdy vkládám každý řez zvlášť, abych věděla, že pak vyberu ten, který potřebuji (ale pak načítám uživateli fonty navíc – záleží na situaci a chování fontu. Někdy je možné nastavit konkrétní řez např. z Regular verze fontu, někdy to nejde a potom ho nahrávám extra).

Lokální fonty - nahrávání fontu

5) Pozor – při pokusu o nahrání fontu dostanete chybu: „Sorry, you are not allowed to upload this file type„. Jinými slovy – WordPress má ochranu na typy souborů při vkládání a má seznam koncovek souborů, které povolí nahrát – .ttf ani .otf mezi nimi nejsou.

Řešení je jednoduché – do wp-config.php souboru na FTP vložíte (téměř) na konec (před komentář „That’s all, stop editing! Hasppy publishing.„) následující řádek (doporučuji ho hned po nahrání fontů smazat):

define('ALLOW_UNFILTERED_UPLOADS', true);
Lokální fonty - chyba při nahrávání
Lokální fonty - povolení typů souborů

6) Výsledkem bude, že font bude mezi dostupnými jak v modulech, tak i v nastavení šablony (Vzhled -> Přizpůsobit) – což je přesně místo, kde ho chceme vidět, abychom nastavili globální fonty např. pro všechny nadpisy.

Lokální fonty - nahraný font
Lokální fonty - nahraný font

7) Krok 3 a 4 můžete opakovat pro písma a řezy libovolně, kolikrát potřebujete.

8) Nezapomeňte vrátit soubor wp-config.php do původního stavu!

Pozn: Netvrdím, že to je jedná možnost, jak fonty do DIVI dostat, ale je to ta nejméně namáhavá, která nevyžaduje plugin. Setkala jsem se s případem, kdy font nešel převést do .ttf souboru, protože ho konvertor ničil (font byl hodně okrasný a konverze se nepovedla), a tehdy jsem ho nahrávala ručně do CSS.

Happy publishing… Happy „fonting“?

Zdroje

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...