Již jsme si dříve ukázali, jak vložit do stránky vlastní písmo. Tento přístup ale vyžaduje, abyste příslušné písmo měli a nahráli na svůj web server.
Existuje ale i alternativa, jak použít na webu pěkné písmo, bez nutnosti shánět vlastní písmo a konvertovat ho pro web.
Tím jsou Google Fonts, neboli online knihovna volně dostupných písem. Písma jsou hostována přímo na stránkách Googlu (CDN/Cloud), takže pokud si uživatel jednou písmo stáhne, bude ho moci používat na všech vašich i cizích webech (teď samozřejmě mluvím o cachování – není potřeba nic instalovat).
Na stránce Google Fonts si můžete přímo vybrat písmo podle vzhledu, nebo vyhledat konkrétné (vlevo nahoře je vyhledávací políčko). Pokud hledáte písmo pro český web, doporučuji v poli Preview Text zvolit Enter your own text a zadat místo anglické věty „Grumpy wizards make…“ českou alternativku „Příliš žluťoučký kůň úpěl ďábelské ódy!“ (tzv. pangram, který obsahuje všechny písmena abecedy daného jazyka).
Pomocí filtrů v levém sloupci můžete vyřadit písma, která vás nezajímají: Serif (patkové – pro delší texty), Sans Serif (bezpatkové – pro nadpisy, popisky, apod.), Display (písma pro reklamy, letáky, apod.), Handwriting (písma, která vypadají jako psaná rukou) a Monospace (písma se stejnou šířkou písmen – často používané pro programování, PC konzole, apod.)
Poté, co si v seznamu vyberete nejlepší písmo, klikněte na tlačítko Add to Collection – přidat můžete více písem, která budete na webu používat – a klikněte pravo dole na Use. Tím přejdete na stránku, kde si písma upravíte podle potřeby.
V první kroku vyberte varianty písma, která chcete použít. Dobré je zvolit normální (normal nebo light), tučné (bold – hodnota odpovídá hodnotě CSS vlastnosti bold) a kurzívu (italic). Pokud má písmo více alternativ, nevybírejte všechny, protože by písmo zbytečně zpomalovalo načítání stránky.
Např. písmo Open Sans, které je nejpoužívanější, má verze Light, Normal a 3 různé Bold, všechny v kombinaci s Italic; zpravidla si ale vystačíte jen s Normal a Bold 700, pro více možností stačí Light, Bold 600 a Bold 800 (a jejich kombinace s Italic, pokud je použijete).
V druhém kroku začkrtněte Latin a Latin Extended pro češtinu. Pokud děláte celoevropské stránky, budete ještě potřebovat Greek pro řečtinu a Cyrillic pro ruštinu a další východoevropské státy.
Ve třetím kroku vyberte, jak chcete písmo do stránky vložit. Metoda Standard složí pro vložení do HTML hlavičky, metoda @import pro vložení do CSS souboru a metoda Javascript pro dynamické vkládání pomocí skriptu:
//HTML
<html>
<head>
<!-- ... ostatní kód -->
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic,800,800italic&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<style> body { font-family: 'Open Sans' }
</head>
<body>
<!-- kód stránky -->
</body>
</html>
//CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic,800,800italic&subset=latin-ext,latin);
body { font-family: 'Open Sans' }
//JavaScript
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans:300,300italic,600,600italic,800,800italic:latin,latin-ext' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
//Vanilla Javascript
document.body.style.fontFamily = 'Open Sans';
//jQuery
$('body').css('font-family', 'Open Sans');
</script>
Ve čtvrtém kroku máte ukázáno, jak použít příslušná písma (viz kód výše).
A to je vše. Stačí na web nahrát upravený HTML, CSS nebo JS soubor (podle zvolené metody) a písmo se vám automaticky stáhne z Googlu serveru.
Pokud používáte CSS metodu, podívejte se na článek Jak na CSS importy?, aby se vám písmo vždy načítalo.
Stažení písma
Pokud chcete mít možnost debugovat vaše stránky na localhostu bez nutnosti připojovat se k internetu (nebo chcete písma použít do grafických návrhů či wireframů), můžete si příslušná písma stáhnout pomocí ikony šipky vpravo nahoře (na stránce Use). Následně postupujte podle dříve uveřejněného návodu. Alternativně můžete stažené soubory nahrát přímo do vašeho systemu (na Windows složka C:\Windows\Fonts) a budete moci používat písma i např. ve PhotoShopu apod.