Google Fonts představuje významný zdroj webfontů, který umožňuje webdesignerům a vývojářům snadno začlenit rozmanité typografie do svých projektů bez nutnosti vlastnění fontových souborů. Tento článek poskytuje podrobný návod, jak integraci fontů z Google Fonts provést efektivně a s ohledem na nejlepší praxe.
1. Výběr fontu na Google Fonts
Prvním krokem je výběr požadovaného fontu na webu Google Fonts. Na domovské stránce lze využít vyhledávací funkce pro nalezení specifického fontu, nebo procházet kolekce podle kategorií jako jsou serif, sans-serif, display atd. Po nalezení vhodného fontu klikněte na něj pro zobrazení detailů a dostupných stylů.
2. Začlenění fontu do Webové stránky
Po výběru fontu následují dva způsoby, jak jej začlenit do projektu: pomocí HTML link tagu nebo CSS @import pravidla.
2.1 Použití HTML link tagu
Tento způsob je doporučen pro jeho jednoduchost a efektivitu načítání. V detailu fontu na Google Fonts vyberte požadované styly a klikněte na „Select this style“. Vpravo nahoru se objeví panel s kódem, který kopírujte a vložte do <head> části HTML dokumentu vaší webové stránky.
Příklad:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
2.2 Použití CSS @import pravidla
Alternativou je začlenění fontu přímo do CSS souboru pomocí @import pravidla. Tato metoda může zpomalit načítání stránky, proto je doporučena pouze v určitých případech.
Příklad:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
3. Použití fontu v CSS
Po začlenění fontu do webové stránky jej lze použít v CSS pravidlech pro nastavení typografie elementů. Pro toto je třeba ve stylu specifikovat font-family s názvem fontu.
Příklad:
body {
font-family: 'Open Sans', sans-serif;
}
4. Optimalizace načítání fontů
Pro zlepšení výkonnosti webové stránky je doporučeno omezit počet fontových stylů a váh, které načítáte. Každý styl nebo váha znamená další požadavek na server, což může zpomalit načítání stránky. Při výběru fontů na Google Fonts proto pečlivě zvažte, které styly a váhy jsou skutečně potřebné pro váš projekt.
Integrace fontů z Google Fonts do webového projektu je jednoduchý a přímý proces. Dodržením uvedených kroků a nejlepších praxí můžete efektivně zlepšit vizuální stránku vaší webové stránky s minimálním dopadem na její výkonnost.
