Používání vlastních písem (webfontů) na webových stránkách může značně zlepšit vizuální dojem a uživatelskou přívětivost webu. Nicméně, správné načítání a využití těchto písem může představovat technickou výzvu. V tomto článku se podíváme na nejčastější problémy spojené s načítáním webfontů v CSS a nabídneme řešení k jejich překonání.
1. Optimalizace výkonu při načítání písem
Jedním z hlavních problémů při používání webfontů je negativní dopad na výkon načítání stránky. Pro zlepšení výkonu je doporučeno:
- Použití formátu WOFF2: Tento formát písma nabízí lepší kompresi a rychlejší načítání. Ve vašem CSS kódu upřednostněte použití WOFF2 před ostatními formáty.
@font-face {
font-family: 'MojePismo';
src: url('mojepismo.woff2') format('woff2'),
url('mojepismo.woff') format('woff');
font-weight: normal;
font-style: normal;
}
- Předběžné načítání písma: Pomocí atributu
rel="preload" v tagu <link> můžete prohlížeči naznačit, aby začal načítat písmo co nejdříve.
<link rel="preload" href="/mojepismo.woff2" as="font" type="font/woff2" crossorigin>
2. Zajištění kompatibility s prohlížeči
Různé prohlížeče podporují různé formáty písem. Aby bylo zajištěno, že vaše písma budou fungovat napříč všemi hlavními prohlížeči, je důležité nabídnout více formátů písma.
- Zahrnutí více formátů: Kromě WOFF2 doplňte také WOFF, TTF a EOT (pro starší verze Internet Exploreru).
3. Zachování výkonu pomocí font-display
Vlastnost font-display v CSS umožňuje ovlivnit, jak se písma zobrazují během jejich načítání. Použitím swap nebo fallback můžete zlepšit uživatelskou zkušenost tím, že text zůstane čitelný, i když se písma ještě načítají.
@font-face {
font-family: 'MojePismo';
src: url('mojepismo.woff2') format('woff2');
font-display: swap;
}
4. Řešení problémů s CORS
Když se pokoušíte načíst písma z jiné domény, může dojít k problémům s politikou stejného původu (CORS). Pro zajištění správného načítání písma přidejte na server, ze kterého písma načítáte, odpovídající HTTP hlavičky.
- Povolení sdílení zdrojů: Na serveru, který hostuje písma, nastavte HTTP hlavičku
Access-Control-Allow-Origin tak, aby povolovala načítání písma z vaší domény.
Správné použití webfontů může značně přispět k vizuální identitě a celkovému dojmu z vašeho webu. Dodržováním uvedených osvědčených postupů zajistíte, že vaše písma budou načítána efektivně a bez problémů, což povede k lepší uživatelské zkušenosti na vašem webu.
