Erikoisfontit verkkosivuilla

Tyypillisesti verkkosivuilla käytetään ns. web safe -fontteja. Tämä tarkoittaa perusfontteja sarjassa Arial, Times New Roman, Verdana jne. Fontteja, jotka löytyvät kaikilta käyttöjärjestelmiltä ja jotka siitä syystä näkyvät myös kaikilla selaimilla.

Sivuston ilmettä on kuitenkin kiva piristää erikoisfonteilla. Niiden lisäämiseen sivulle on kaksi tapaa:

  1. Kirjoita teksti kuvankäsittelyohjelmalla, pilko se ja laita kuva sivustollasi kohtaan jossa haluat tekstin näkyvän. Menetä samalla kaikki otsikkotekstin tuoma hakukoneoptimointihyöty.
  2. Käytä jotakin JavaScript -kirjastoa, jonka avulla muutat tekstin erikoisfontiksi. Ota samalla riski sivuston merkittävästä hidastumisesta.

Olen itse jo ajat sitten luopunut tavasta yksi, koska haluan kehittää sivut lähtökohtaisesti hakukoneystävällisiksi. Onneksi asiakkaatkaan eivät tätä enää vaadi, vaan yleensä ovat riittävän valveutuneita tarjoamaan käyttöön JavaScript -kirjastoa, josta ovat valinneet sopivan fontin. Valitettavan usein se on kuitenkin Cufon tai Typekit. Tässä vaiheessa mun tekisi mieli laittaa tähän joku hyvin vihaa lietsova kuva, mutta en keksi mitään tarpeeksi hyvää. Tyydyn siis ainoastaan toteamaan:

Älä käytä Cufonia tai Typekitiä tai mitään vastaavaa, koska ne ovat yksinkertaiseseti liian raskaita, monimutkaisia ja hyöty-laatu -suhde on aivan olematon, koska tavoittelet kuitenkin ainoastaan erikoisfontilla kirjoitettua tekstiä. Puhumattakaan siitä, että maksaisit siitä, että teet sivustostasi huonomman, kuten käyttämällä Typekitiä.

Mikään ei ole yhtä typerä syy laskea sivuston Google-näkyvyyttä tekemällä siitä tarpeettoman raskaan kuin erikoisfonttien käyttäminen huonon JavaScript-kirjaston avulla.

Tarjoan tähän ratkaisun, jonka olen henkilökohtaisesti kokenut olevan itse asiassa todella hyvä. Olen aikaisemmin ollut erittäin, siis erittäin erikoisfonttivastainen, mutta jopa mun pääni on saanut kääntymään Google Web Fonts.

Se on kevyt, helppokäyttöinen ja ilmainen. Ja Googlen, jonka noin oletusarvoisesti voisi olettaa tarkoittavan myös sitä, että se on Google-ystävällinen. Eli se ei vaikuta negatiivisesti hakukonenäkyvyyteen.

Asennus on yksinkertaista:

  1. Etsi sopiva fontti
  2. Klikkaa Quick-use
  3. Kopioi link href -koodi
  4. Kopioi lisää font-family -määritys css:ssä siihen elementtiin jossa haluat fonttia käyttää

Helppoa kuin heinänteko, josta mulla ei muuten ole aavistustakaan onko se helppoa vai ei. Suosittelen kuitenkin Google Web Fontsia kaikille, jotka kaipaavat erikoisfontteja sivustoaan piristämään.

Muutama huomio vielä kuitenkin loppuun:

  • Älä viljele erikoisfonttia liikaa. Liiallinen erikoisfonttien käyttö syö käytettävyyttä ja konversiota (käyttäjät ovat tottuneet tiettyihin fontteihin verkkosivuilla) ja hidastaa suotta sivuston latausnopeutta, joka taas vaikuttaa negatiivisesti löydettävyyteen Googlen luonnollisista hakutuloksista.
  • Google Web Fonts sivulla on Page Load -niminen ominaisuus. Kiinnitä huomiota siihen. Mikäli fontti on tämän ominaisuuden mukaan kevyt, voit käyttää sitä enemmän. Mikäli ominaisuus kertoo fontin olevan raskas, käytä sitä vain harkituissa paikoissa.

Kommentoi Facebook-tunnuksilla

kommenttia

2 kommenttia artikkeliin ”Erikoisfontit verkkosivuilla

  1. Ja nää saa myös ladattua koneelle ja voi käyttää printissäkin. Osa on ihan hyviä eivätkä (vielä) niin kuluneita kuin perinteiset suosikkifontit. Ja kitsaat asiakkaathan eivät tunnetusti halua maksaa siitä että niille etsisi jotain uusia.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Time limit is exhausted. Please reload the CAPTCHA.