Jak správně nastavit „Load Google Fonts Locally“

Jak správně nastavit „Load Google Fonts Locally“ v Elementoru a jak zkombinovat s WP Rocket (Preload Fonts + Self-host fonts)

Proč řešit načítání Google Fonts lokálně

Načítání fontů z Google CDN:

– zpomaluje web (další DNS lookup + další requesty) – může být problém z pohledu GDPR (načítání z externí služby) – hůř se optimalizuje v nástrojích jako PageSpeed Insights

Proto Elementor Pro nabízí funkci „Load Google Fonts Locally“ a plugin WP Rocket přidává další možnosti optimalizace (Preload Fonts, Self-host fonts). Na hostingu Ziveweby vše funguje bez dodatečných omezení, takže se můžete soustředit jen na správné nastavení.

Kde v Elementoru zapnout „Load Google Fonts Locally“

Krok 1: Ověření, že používáte Google Fonts přes Elementor

1. V administraci WordPressu jděte do: – Vzhled → Přizpůsobit (nebo Nastavení šablony) – Zkontrolujte, zda šablona sama nenačítá Google Fonts (např. vlastní nastavení typografie). 2. V Elementoru: – Elementor → Nastavení → Styl – V sekci Typografie ověřte, jaké fonty používáte (např. Roboto, Open Sans atd.).

Cíl: aby Google Fonts neprocházely přes šablonu i Elementor zároveň. Ideálně nastavte typografii jen v Elementoru a v šabloně použijte „System fonts“ nebo vypněte načítání Google Fonts (pokud to šablona umožňuje).

Krok 2: Zapnutí Load Google Fonts Locally

1. V administraci WordPressu: – Elementor → Nastavení → Pokročilé (Advanced). 2. Najděte volbu: – „Load Google Fonts Locally“ (Načítat Google Fonts lokálně). 3. Zaškrtněte/aktivujte tuto volbu. 4. Uložte změny.

Tím zajistíte, že Google Fonts, které Elementor používá, se budou stahovat a servírovat z vašeho webu (z vašeho hostingu Ziveweby), ne z fonts.googleapis.com.

Krok 3: Globální fonty v Elementoru

1. Otevřete libovolnou stránku v Elementor editoru.
2. V levém horním rohu klikněte na ikonku „Logo/hamburger“ → Site Settings (Nastavení stránky).
3. Přejděte do sekce Typography (Písmo).
4. Nastavte: – Global Fonts (globální fonty) – pro text, nadpisy, akcenty.
5. Používejte tyto globální styly na celém webu.

Tím minimalizujete počet různých fontů a řezů (weight), které se budou generovat a načítat.

Jak Elementor ukládá Google Fonts lokálně

Co se technicky stane

Po aktivaci „Load Google Fonts Locally“:

– Elementor zjistí, jaké Google Fonts používáte (rodiny + řezy, např. 400, 700, italic). – Stáhne potřebné soubory fontů (WOFF/WOFF2) na váš server.
– Vygeneruje vlastní CSS, které odkazuje na lokální soubory (např. /wp-content/uploads/elementor/css/… nebo /fonts/).
– Přestane používat externí URL typu: – https://fonts.googleapis.com/css?family=…

Proto je důležité po změně typografie (přidání nového řezu fontu) občas vymazat cache (Elementor + WP Rocket), aby se nové varianty fontu skutečně načetly.

Nastavení WP Rocket: Preload Fonts

Co je Preload Fonts

„Preload Fonts“ v WP Rocket je funkce, která:

– přidá do hlavičky HTML tagy „ – prohlížeči řekne: „Tyto fonty jsou důležité, načti je co nejdříve.“ – zlepšuje metriky jako First Contentful Paint (FCP) a Largest Contentful Paint (LCP).

Má smysl pre-loadovat jen ty fonty, které se používají „nad přehybem“ (above the fold) – typicky hlavní nadpis + základní text v horní části homepage.

Kde v WP Rocket nastavit Preload Fonts

1. V administraci WordPressu: – Nastavení → WP Rocket.
2. Přejděte do záložky: – „Preload“ (nebo podobně pojmenované podle verze).
3. Najděte sekci „Preload Fonts“ / „Font Preloading“.
4. Do seznamu vložte URL fontů, které chcete preloadovat.

Pozor: musí to být URL k lokálním souborům fontů (na vaší doméně), ne na Google Fonts.

Jak najít správné URL lokálních fontů z Elementoru

Postup přes nástroje pro vývojáře v prohlížeči

1. Otevřete homepage webu v prohlížeči (Chrome, Firefox).
2. Zapněte DevTools: – F12 nebo Ctrl+Shift+I (Cmd+Opt+I na Macu).
3. Přejděte na panel Network → filtrujte podle „Font“.
4. Obnovte stránku (Ctrl+R / F5).
5. Uvidíte seznam načítaných fontů, např.: – https://vasweb.cz/wp-content/uploads/elementor/fonts/roboto-latin-400.woff2 – https://vasweb.cz/wp-content/uploads/elementor/fonts/roboto-latin-700.woff2 6. Zkopírujte relativní cestu (bez domény), např.: – /wp-content/uploads/elementor/fonts/roboto-latin-400.woff2

Tu vložte do WP Rocket do seznamu Preload Fonts.

Co preloadovat

Zaměřte se na:

– základní řez hlavního textu (např. 400 regular) –
řez nadpisů (např. 700 bold)
– jen formát WOFF2 (pokud je k dispozici) – je nejefektivnější

Nepřehánějte to – 2–4 font soubory většinou stačí. Příliš mnoho preloadovaných fontů může naopak zpomalit první načtení.

Nastavení WP Rocket: Self-host fonts

Co znamená Self-host fonts ve WP Rocket

Novější verze WP Rocket mají funkci, která:

– detekuje načítání Google Fonts z externího zdroje
– stáhne je na váš server
– upraví CSS, aby se načítaly lokálně

To je podobný princip jako u „Load Google Fonts Locally“ v Elementoru. Pokud používáte Elementor pro typografii, je lepší mít hlavní kontrolu v Elementoru a WP Rocket nastavit tak, aby se nepřetahovaly o stejné fonty.

Jak nekolidovat Elementor a WP Rocket

Možnosti:

1. **Primární je Elementor, WP Rocket jen doplňuje:** – V Elementoru: – Zapnout „Load Google Fonts Locally“. – V WP Rocket: – Funkci „Self-host fonts“ (pokud míří na Google Fonts) můžete nechat vypnutou, pokud Elementor vše řeší. – Výhoda: méně duplicity, přehlednější řízení fontů.

2. **Primárně WP Rocket, Elementor jen používá fonty:** – V Elementoru: – Nechat „Load Google Fonts Locally“ vypnuté. – V WP Rocket: – Zapnout „Self-host fonts“ pro Google Fonts. – Nevýhoda: máte méně kontroly nad tím, jak přesně Elementor generuje CSS pro fonty, a může dojít k drobným nesrovnalostem.

Doporučení pro weby na hostingu Ziveweby: – Použijte variantu 1 – tedy: – Elementor: Load Google Fonts Locally = ANO – WP Rocket: Self-host Google Fonts = VYPNOUT (pokud je tato volba samostatně) – WP Rocket: Preload Fonts = ANO, ale jen pro vybrané lokální fonty

Ideální kombinace Elementor + WP Rocket krok za krokem

1. Vyčistit zdroje fontů

– V šabloně: – Deaktivujte vlastní načítání Google Fonts, pokud to jde. – V pluginech: – Zkontrolujte, zda jiný plugin nenačítá vlastní Google Fonts (např. formuláře, page buildery, slider pluginy). – Cíl: aby Google Fonts šly primárně přes Elementor.

2. Nastavit Elementor

1. Elementor → Nastavení → Pokročilé: – „Load Google Fonts Locally“ = Zapnout. 2. Elementor → Nastavení webu (Site Settings) → Typography: – definovat 1–2 rodiny fontů (např. Roboto pro text, Playfair Display pro nadpisy), – definovat jen potřebné řezy (např. 400, 700). 3. Uložit a projít hlavní stránky, aby Elementor vygeneroval CSS a stáhl fonty.

3. Nastavit WP Rocket – cache a optimalizace

1. V WP Rocket: – Aktivujte běžné optimalizace (cache, minifikace CSS/JS, lazyload obrázků). 2. V sekci pro Google Fonts / Fonts: – Pokud je tam možnost „Optimize Google Fonts“ nebo „Self-host Google Fonts“: – vypněte ji, pokud vše řeší Elementor (aby nedocházelo ke zdvojení). 3. Uložte nastavení a vymažte cache WP Rocket.

4. Nastavit Preload Fonts ve WP Rocket

1. Zjistěte URL lokálních fontů (viz postup v DevTools). 2. Do WP Rocket → Preload → Preload Fonts: – vložte relativní cesty k 2–4 nejdůležitějším WOFF2 fontům, např.: – /wp-content/uploads/elementor/fonts/roboto-latin-400.woff2 – /wp-content/uploads/elementor/fonts/roboto-latin-700.woff2 3. Uložte a vymažte cache.

Testování a ladění

Jak zkontrolovat, že se Google Fonts načítají lokálně

1. Otevřete DevTools → Network → filtr „Font“.
2. Ověřte: – Žádné requesty na: – fonts.googleapis.com – fonts.gstatic.com – Všechny fonty se načítají z: – vaše-domena.cz / doména na hostingu Ziveweby.

Jak zkontrolovat preload

1. V DevTools → panel „Network“: – Obnovte stránku a sledujte čas načtení fontů. – Preloadované fonty se načítají mezi prvními requesty.
2. V záložce „Sources“ nebo „Elements“: – v „ by měly být „ s vašimi lokálními fonty.

PageSpeed Insights / Lighthouse

– Ověřte: – Nezobrazují se varování typu „Ensure text remains visible during webfont load“ – případně doplnit `font-display: swap` (Elementor to obvykle řeší). – Nejsou varování na blokující načítání Google Fonts z externích domén.

Nejčastější problémy a jejich řešení

1. Font se nezobrazuje správně po zapnutí Load Google Fonts Locally

Možné příčiny:

– Cache Elementor + WP Rocket není vymazaná.
– Používáte řez fontu, který nebyl stažen (např. 300 italic, ale v typografii máte nastavený jen 400 a 700).

Řešení:

– Vymažte cache: – Elementor → Tools → Regenerate CSS & Data. – WP Rocket → Clear cache.
– Zkontrolujte v Site Settings → Typography, zda máte definované všechny používané řezy.

2. Duplicitní načítání fontů (externí i lokální)

Projevy:

– V Network vidíte jak requesty na fonts.googleapis.com, tak lokální fonty.
– Web se načítá pomaleji, než by měl.

Řešení:

– V šabloně vypnout Google Fonts.
– Zkontrolovat, zda jiný plugin nenačítá vlastní Google Fonts.
– V WP Rocket vypnout „Optimize Google Fonts/Self-host“ pokud používáte Elementor „Load Google Fonts Locally“.

3. Preload příliš mnoha fontů

Projevy:

– Zhoršení TTFB nebo FCP, přestože fonty jsou „preloadované“.
– V Network vidíte desítky font souborů načtených hned na začátku.

Řešení:

– Omezte Preload Fonts v WP Rocket jen na: – 1–2 řezy hlavního textu – 1–2 řezy hlavních nadpisů – Ostatní řezy nechte načítat standardně.

Shrnutí doporučeného nastavení (Elementor + WP Rocket + Ziveweby)

Elementor

– Elementor → Nastavení → Pokročilé: – Load Google Fonts Locally = ANO – Site Settings → Typography: – Používat 1–2 rodiny fontů – Definovat jen potřebné řezy (400, 700 apod.)

WP Rocket

– Vypnout vlastní „Self-host Google Fonts“, pokud míří na stejné Google Fonts jako Elementor.
– V Preload Fonts: – přidat 2–4 lokální WOFF2 fonty, které se používají nad přehybem. – Pravidelně po větších změnách designu: – vymazat cache WP Rocket a regenerovat CSS v Elementoru.