@font-face je pravidlo CSS, které umožňuje zobrazovat písma na webových stránkách na internetu. Před zavedením tohoto pravidla mohli správci webových stránek na svých stránkách používat omezenou sadu písem, která jsou nejběžnější a která jsou nainstalována v počítačích uživatelů. S příchodem @font-face lze na webové stránky snadno připojit libovolné konkrétní písmo.
Pokud jste si písmo stáhli na našich stránkách, v archivu s písmy najdete připravený kód CSS, který je třeba zkopírovat a vložit do dokumentu CSS připojeného k projektu.
Instalace krok za krokem
1. Vyberte požadované písmo a klikněte na tlačítko "stáhnout pro webové stránky".
2. V kořenovém adresáři webu vytvořte složku fonts a zkopírujte do ní stažená písma.
Otevřete dokument CSS a zkopírujte do něj obsah textového souboru z archivu.
4. Zkontrolujte, zda je cesta ke složce s písmem napsána správně. V závislosti na umístění složky, ve které jsou písma umístěna, může cesta obsahovat jednu nebo více teček.
5. Hotovo. Zkopírujte vlastnost s názvem rodiny a vložte ji do selektoru, pro který píšete styly.
Co když už jsem si písmo stáhl jinde a chci ho zapojit?
V tomto případě musíte na internetu najít převodník písem a převést své písmo ttf (nebo otf) do správných formátů, konkrétně eot, svg, woff a woff2. Tím zajistíte, že se písmo bude správně zobrazovat a fungovat ve všech prohlížečích i na mobilních zařízeních.
Pravidlo @font-face pak musíte napsat sami a dodržet jeho syntaxi.
Syntaxe pro @font-face
Syntaxi pravidla lze zhruba rozdělit na základní vlastnosti a pokročilé vlastnosti.
Základní:
- font-family - určuje název písma.
- src - označuje cestu písma. Může to být adresa URL písma umístěná na serveru vaší webové stránky, adresa URL písma umístěná na serveru někoho jiného (například Google Fonts) nebo jednoduše název písma umístěný v počítači uživatele (Helvetica New Bold, Tahoma, Georgia atd.) .
Rozšířeno:
- font-display - určuje, jak se bude písmo zobrazovat v závislosti na tom, zda bylo staženo a je připraveno k použití.
- font-stretch - umožňuje nastavit šířku textu.
- font-style - určuje, zda je písmo obyčejné, kurzíva nebo šikmé (poslední dvě možnosti nejsou stejné).
- font-weight - Nastavuje sytost písma na stupnici od 100 do 900 (100-malé, 900-malé).
- font-variant - určete, jak mají být malá písmena prezentována - nechte je neupravená nebo je vytvořte všechna malá (velká).
- font-feature-settings - umožňuje spravovat pokročilé typografické funkce písem OpenType.
- font-variations-settings - umožňuje nízkoúrovňovou kontrolu nad variantami písem Open Type a TrueType zadáním čtyřpísmenných názvů os.
- unicode-range - určuje rozsah kódů Unicode (glyfů), které mají být v písmu použity.
Připojení písma k vašemu webu pomocí Google Fonts
Použití písma Google Fonts je nejjednodušší způsob, jak písmo propojit s vašimi webovými stránkami. Přejděte na jejich web, najděte požadované písmo, vyberte správné písmo k instalaci a zkopírujte kód.
Zkopírovaný kód by měl být umístěn v těle tagu head na stránce html.
Nevýhodou tohoto způsobu je, že pokud jste během tvorby webu přišli o internet - písma se nezobrazí a nahradí se standardními, protože soubory nejsou umístěny na lokálním počítači, ale na serverech Google. Také je pravděpodobné, že když přijdete ke klientovi na prezentaci rozvržení (nebo jen na konfortaci) a on nebude mít Wi-Fi, problém nastane znovu.
