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:
- 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.
- Font není k dispozici v DIVI “knihovně” fontů, ať už z jakéhokoli důvodu.
- Kvůli rychlosti načítání (ač je tenhle bod někdy sporný…).
- Dostupnost – lokálně uložené fonty budou prostě dostupné vždy, pokud jejich adresa bude platná.
- a další.
A) Nahrání fontu přes modul
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ý):
2) V záložce Design klikněte na výběr fontu:
3) Otevře se modální okno, kde uvidíte tlačítko “Upload“:
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).
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);
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.
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.
B) Nahrání fontu přes functions.php
Font je možné DIVI naučit i přes snippet (kousek kódu). A ideální místo pro takový kousek je functions.php soubor v child theme. Font nahrajete přes FTP a pak ho uvedete do cesty. Ideální umístění je např.
- wp-uploads/themes/{child-theme}/fonts/vas.font
- wp-uploads/fonts/vas.font
add_filter('et_websafe_fonts', 'load_divi_custom_font',10,2);
function load_divi_custom_font($fonts) {
wp_enqueue_style( 'divi-child', get_stylesheet_directory_uri() . '/webfonts/stylesheet.css' );
// Add multiple fonts to Divi's font menu
$custom_font = array('Bergen Sans' => array(
'styles' => '400italic,700italic,400,700',
'character_set' => 'latin',
'type' => 'sans-serif',
'standard' => 1
),
'Your Second Font' => array(
'styles' => '400italic,700italic,400,700',
'character_set' => 'latin',
'type' => 'sans-serif',
'standard' => 1
));
return array_merge($custom_font,$fonts);
}V každém případě je potřeba uvést v CSS souboru všechny varianty, které budete na webu potřebovat. Pokud máte variabilní font, pak jste vysmátí a je vám to jedno.
Takový CSS soubor může vypadat třeba jako:
@font-face {
font-family: 'Bergen Sans';
src: url('BergenSans-BoldItalic.woff2') format('woff2'),
url('BergenSans-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Bergen Sans';
src: url('BergenSans-Regular.woff2') format('woff2'),
url('BergenSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}Happy publishing… Happy “fonting”?
