Font-Family

Google Fonts

Tipy pro češtinu:

Zvolte: Latin Extended
Pro kontrolu využijte Pangram (z řečtiny „každé písmeno“): "Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890"
Volte raději užší písmo (u moc širokého písma se vejde na řádek málo znaků)
Sekce "Quick Use" zobrazuje rychlost načítání písma

Font Squirrel

Font Squirrel umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému.

Výhody:

neobaluje HTML zdroj pomocnými tagy
využívá kombinace javascriptu a CSS
font je možné i tisknout
má menší datovou náročnost než Cufón
font se aplikuje i na obsah "dotažený" např. pomocí jquery
podpora v prohlížečích:
- WOFF – Web Open Font Format (84 %)
- EOT – Embedded OpenType fonts (16 % – pouze IE)
- TTF/OTF – TrueType and OpenType font support (89 % – moderní prohlížeče)

Postup:

Stáhnout si požadovaný TTF font písma:
- České fonty (Pangram: "Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890")
- Font Squirrel (české webové fonty)
- Google Fonts (české – latin extended: Oregano, Devonshire, Black Ops One, Poiret One, New Rocker, Hanalei, Aladin, Black Ops One, Open Sans Condensed atd.)
- The League of Moveable Type
- Lost Type
- Typekit.com
- KERNEST
- Fonts4Free
- Fontdeck (jen placené)
- Fonts.com (jen placené nebo s reklamou)
Pomocí Font Squirrel generátoru vygenerovat požadované soubory:
- pro české fonty nastavit volby:
  - Expert
  - Subsetting: Custom Subsetting
    - Language: Czech
    - (Unicode Tables: Basic Latin, Latin Extended-A)
Rozbalit webfontkit archiv, rozbalený adresář přejmenovat např. na fonts a umístit do svého tématu vzhledu.
V html zdroji připojit CSS fonts/stylesheet.css (v Drupalu nejlépe pomocí .info souboru).
Název fontu obsažený v souboru stylesheet.css je možné použít v libovolném CSS jako vlastnot font-family.
Tipy:
- Velikost fontu @font-face udávaná v jednotkách em někdy neodpovídá předpokladům, proto je vhodnější udávat velkost fontu v jednotkách px.
- Ačkoli by přidání vyhlazení a průhledného stínu nemělo nic změnit – opak je pravdou. Přidáním níže uvedených vlastností se font najednou renderuje úplně jinak a to mnohem lépe:
- ```
.selector {
  -webkit-font-smoothing: antialiased;
  text-shadow: transparent 0px 1px 1px;
}
```