Blog

Lokální fonty v DIVI

Dub 25, 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”?

Zdroj: https://blog.hubspot.com/website/file-type-not-permitted-security-reasons

Co si ještě přečíst?

Zajímavosti z projektů

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Bezvýpadkové nasazení webu

O co vlastně jde Ne vždy má člověk štěstí na to, aby dělal nový web od základu a občas je potřeba...

Práce s DIVI

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Mega menu bez pluginu

Poslední dobou čím dál častěji potkávám tzv. "Mega-menu", tedy podmenu, které je přes celou šířku...

Návody

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Mixed content na webu

Mixed content na webu dokáže pěkně potrápit. V lepším případě se zobrazí jako otravná hláška v...