Speciální font na web

Jak na webu používat nějaký neobyčejný font místo běžných Arialů, Timesů, atd.. ?

Nejsnadnější cesta je jít na "Google Fonts" (http://www.google.com/fonts), kde si zvolíte font, dále jeho řezy, tučnosti atd... a pár kliky máte vygenerovaný kód pro vložení fontu do webu a ukázku jak font použít v CSS.

Jak na to? (Příklad)
1) jdeme na http://www.google.com/fonts
2) najdu si vysněný font (pro ukázku volím fonty - Monda + Titillium Web) - buď proklikáváním kategorií či přímo zadáním jména fontu do vyhledávacího pole
3) vložíme font do kolekce - "Add to collection" (vpravo dole u daného fontu)
x) Body 2 a 3 můžeme provést i pro více fontů, ale mnohdy se i 1 font načítá dlouho natož více fontů.
4) Na spodní straně obrazovky je lišta s nápisem "Collection" a my zvolíme z této lišty tlačítko "Use".
5) Vidíme možné řezy daných fontů (fontu) a přez obyčejné checkboxy si zvolíme jaké řezy chceme využívat (nedoporučuji všechny skrze časovou náročnost načítání). Hlavně nesmíme opomenou checkbox s popiskem "Latin Extended", který povolí fontu i české znaky. Důležité je sledovat vpravo nahoře kolečko, které znázorňuje jak dlouho se bude tento font/fonty načítat a jak je patrné méně je více.
6) Pomocí běžného Ctrl+C a Ctrl+V vkládáme námi zvolený font na web (tag link) a také zde vidíme jak máme dané fonty volat v samotném CSS.

Výsledek příkladu je tento (zrovna tento příklad atakuje červenou barvu a má tedy hraniční dobu načítání):

/*vložení fontů*/


/*v CSS budeme psát*/
font-family: 'Monda', sans-serif;
font-family: 'Titillium Web', sans-serif;

- Je to rychlé, snadné, je k mání nepřeberné množství fontů, fonty lze i stáhnout, fonty jsou povětšinou zdarma atd...

Druhá cesta je využívat font-face.
Tato cesta je neideální, protože musíte mít daný font fyzicky na webu a to ve více formátech (EOT pro starší IE, WOFF, TTF či OTF). Problém je jak se dostat k formátům EOT a WOFF. Na to jsou na webu konvertéry, ale ty nefungují vždy některý fám font překonvertuje, ale v daném prohlížeči nefunguje. Jiný udělá totéž, ale naopak to funguje. Mnohdy je problém s licencemi, protože většina fontů, na které narazíte v PC, jsou pod licencí a není legální je využívat. Případně si můžete vytvořit font vlastní.
A když budeme mít dané formáty, tak jak s nimi na web? Tak například takto (je více způsobů):

@font-face {
 font-family: Meny_E;
 src: url("../../fonts/Meny.eot"); /* EOT file for IE 8 a mene */
}
@font-face {
 font-family: Meny_En;
  src: url("../../fonts/Meny.woff") /* EOT file for IE 9+ */
}
@font-face {
 font-family: Meny;
 src: url("../../fonts/Meny.ttf") /* TTF file for CSS3 browsers */
}

Užití fontu je běžné, ale delší:

font-family: Meny, Meny_E, Meny_En, Arial, Georgia, sans-serif;

<< zpět