Sivujen teossa on aikojen alusta saakka ollut ongelmana, että lukijalla pitää olla koneellaan fontit, joita nettisivulla käytetään, tai muuten selain käyttää oletusfontteja. Kuvilla, JavaScriptillä ja Flashillä on ohitettu tätä ongelmaa, mutta oma suosikkini kuvien lisäksi on @font-face. Tehokas ja helppo konsti fontin muuttamiseen.
Jos fontti ei ole tavallinen, mutta se halutaan välttämättä verkkosivulle missä ei haluta käyttää kuvia tai flashiä niin @font-face tarjoaa helpon keinon hoitaa ongelma CSS:n avulla. Fontti pitää ladata webbipalvelimelle minkä jälkeen teemaan pitää määritellä sen nimi ja polku. On mahdollista käyttää myös toiselta verkkosivustolta haettua fonttia, mutta sen lataaminen kestää pitempään kuin omalla palvelimella olevan lataus. Fonttitiedosto ei saisi olla kovin suuri, koska se hidastaa sivuston latautumista.
Kannattaa huomioida, että kaikkia fontteja ei saa käyttää suoraan www-sivuille (EULA) ja ladattavat fonttitiedostot saattavat sisältää viruksia tai muuta vahingollista koodia.
Ilmaisia fontteja on netti täynnä, mutta suosittelen ensimmäisenä tutustumaan palveluun Font Squirrel, koska siellä pääsee kokeilemaan fontteja. Suurin osa fonteista ei tue ääkkösiä.
Muista varmistaa sivuston luettavuus uuden fontin lisäämisen jälkeen, koska oudot fontit voivat aiheuttaa tekstin lukemisongelmia. Tästä syytä yleensä käytän aina oletuksena Verdanaa, joka on erittäin hyvin tuettu ja erittäin helposti luettava.
Tuetut selaimet (nämä ja uudemmat)
ttf
Safari 3.1, Firefox 3.5, Opera 10, Opera Mobile 9.7, Chrome 3
eot
Internet Explorer 4-8, Safari 3.1, Opera 10, Opera Mobile 9.7, Firefox 3.5, Chrome 3
svg
iPhone, iPad, SafariMobile, Opera 10, Opera Mobile 9.7
woff
Firefox 3.6
Koodit kuntoon
Seuraava "koodi" pitäisi pistää teemaan head-elementtien väliin (ennen </head>). Tämä kertoo selaimelle mistä fontti Hobo Std löytyy. Esimerkissä on käytetty kahta erilaista fonttipäätettä, koska haluan mahdollisimman monen selaimen tukevan fonttia. Testieni pohjalta voin sanoa, että ttf toimi ainakin Windowsin ja Linuxin Firefoxilla sekä Nokia N900:n oletus selaimella.
<style type="text/css" media="screen, print">
@font-face {
font-family: "Hobo Std";
src: url("fonts/HoboStd.eot");
src: url("fonts/HoboStd.ttf");
}
</style>Voit kutsua fonttia seuraavasti: .omafontti { font-family: "Hobo Std"; }. Erikoisfontin lisäksi kannattaa aina pistää jotain normifontteja, koska jotkut selaimet tukevat huonosti @font-face -ominaisuutta. Suosittelen käyttämään varmistuksena Verdana,sans-serif eli kokonaisuudesta tulisi .omafontti { font-family: "Hobo Std", Verdana, sans-serif; }.
.omafontti on haluamasi nimi elementille, esim. <div class="omafontti">, ja myös se tulee sijoittaa joko style-elementin sisään tai erilliseen style.css-tiedostoon. Tässä artikkelissa ei kuitenkaan mennä ihan perusteisiin, joten jos tämä ei ole tuttua niin tutustu asiaan täällä.
Fontin koon määrittäminen
Fontin ominaisuuteen voi liittää myös koon: .omafontti { font: 1em "Hobo Std", Verdana, sans-serif; }. Pääte em on elementin fontin korkeus, mutta voit käyttää haluamaasi tapaa määrityksessä. Toinen suosittu on pikseli (px).
Suosittelen antamaan body-elementille tietyn koon mihin muut fonttikoot suhteutetaan. Esimerkki: body { font-size: 14px; } ja .omafontti { font-size: 1.3em; } mikä tarkoittaa, että .omafontti tulee olemaan 30% suurempi. Kuten aiemmin näytinkin niin koko voidaan pistää samaan fontin kanssa.
