Google Fonts
Tipy pre slovenčinu:
- Zvoľte: Latin Extended
- Na kontrolu využite Pangram (z gréčtiny „každé písmeno“): “ Nech už hriešne saxofóny diablov rozzvučia sieň strašnými tónmi waltzu, tangá a quickstepu. 1234567890 „
- Voľte radšej užšie písmo (pri veľmi širokom písme sa zmestí na riadok málo znakov)
- Sekcia “ Quick Use “ zobrazuje rýchlosť načítania písma
Font Squirrel
Font Squirrel umožňuje aplikovať zvolený font písma nezávisle na fontoch užívateľského operačného systému.
Výhody:
- neobaľuje HTML zdroj pomocnými tagmi
- využíva kombinácia javascriptu a CSS
- font je možné aj tlačiť
- má menšiu dátovú náročnosť ako Cufón
- font sa aplikuje aj na obsah „dotiahnutý“ napr. pomocou jquery
- podpora v prehliadačoch:
- WOFF – Web Open Font Format (84 %)
- EOT – Embedded OpenType fonts (16 % – iba IE)
- TTF /OTF – TrueType a OpenType font support (89 % – moderné prehliadače)
Postup:
- Stiahnuť si požadovaný TTF font písma:
- Slovenské fonty (Pangram: „Nech už hriešne saxofóny diablov rozzvučia sieň strašnými tónmi waltzu, tangá a quickstepu. 1234567890“)
- Font Squirrel ( slovenské webové fonty)
- Google Fonts (slovenské – latin extended: Oregano, Devonshire, Black Ops One, Poiret One, New Rocker, Hanalei , Aladin , Black Ops One, Open Sans Condensed atď.)
- League of Moveable Type
- Lost Type
- Typekit.com
- KERNEST
- Fonts4Free
- Fontdeck(len platené)
- Fonts.com(len platené alebo s reklamou)
- Pomocou Font Squirrel generátora vygenerovať požadované súbory:
- pre slovenské fonty nastaviť voľby:
- Expert
- Subsetting: Custom Subsetting
- Language: Slovak
- (Unicode Tables: Basic Latin, Latin Extended-A)
- pre slovenské fonty nastaviť voľby:
- Rozbaliť webfontkit archív, rozbalený adresár premenovať napr. na fonts a umiestniť do svojej témy vzhľadu.
- V html zdroji pripojiť CSS fonts/stylesheet.css (v Drupale najlepšie pomocou .info súboru).
- Názov fontu obsiahnutý v súbore stylesheet.css je možné použiť v ľubovoľnom CSS ako vlastnot
font-family. - Tipy:
- Veľkosť fontu @font-face udávaná v jednotkách em niekedy nezodpovedá predpokladom, preto je vhodnejšie udávať veľkosť fontu v jednotkách px .
- Hoci by pridanie vyhladenia a priehľadného tieňa nemalo nič zmeniť – opak je pravdou. Pridaním nižšie uvedených vlastností sa font naraz renderuje úplne inak a to oveľa lepšie:
- Veľkosť fontu @font-face udávaná v jednotkách em niekedy nezodpovedá predpokladom, preto je vhodnejšie udávať veľkosť fontu v jednotkách px .
.selector {
-webkit-font-smoothing: antialiased;
text-shadow: transparent 0px 1px 1px;
}
Font Awesome
- fortawesome.github.io/Font-Awesome – ikony zadarmo aj na komerčné účely.
Glyphicons
Zadarmo iba obrázky vo formáte PNG. 
