Helppoa.

Tee kotisivut tai verkkokauppa helposti itse - jopa kymmenessä minuutissa

Kokeile ilmaiseksi 2 viikon ajan

Kotisivukoulu

Google-fonttien asentaminen kotisivuille

Maanantai 18.3.2013 - Heikki Tirkkonen


Kotisivukoneen ulkoasueditorista löytyy valmiiksi kokoelma erilaisia tekstityylejä (esim. Arial, Georgia sekä Times New Roman) joita voit käyttää sivustollasi. Aina tosin tämä meidän tarjoama fonttikokoelma ei riitä. Näissä tapauksissa voit myös ottaa käyttöön Google-fontit. Kaikki Googlen tarjoamat fontit ovat ns. verkkoystävällisiä. Tämä tarkoittaa sitä, että fontit näkyvät kävijöille juuri sellaisenaan, eivätkä ne vaadi mitään erillistä asennusta kävijän puolelta toimiakseen. Jos siis haluat sivustollesi piristystä lisäfonttien muodossa, löydät tästä kirjoituksesta ohjeet kuinka saat Google-fontit sivustollesi.

Suuntaa aluksi osoitteeseen www.google.com/webfonts ja selaa sieltä fonttikokoelmaa läpi.

Kun olet löytänyt haluamasi fontin, klikkaa fontin kohdalla "Add to Collection"-linkkiä ja sen jälkeen sivun oikeasta reunasta löytyvää "Use"-linkkiä.

Kun uusi näkymä tulee esiin, kopioi talteen tarvittavat koodinpätkät alla olevista kentistä:

- "3. Add this code to your website:"

- "4. Integrate the fonts into your CSS:"
Esimerkiksi: font-family: 'Roboto', sans-serif;

Kun koodit on kopioitu talteen, siirry seuraavaksi kotisivujesi ylläpitotilaan ja sieltä "Asetukset"-lehdelle. Kun “Asetukset”-lehti on auki, seuraa alla olevia ohjeita:

1. Klikkaa vasemmalta "Asetukset"-linkkiä
2. Napsauta tämän jälkeen “Lisää HTML-kenttiä (edistyneet käyttäjät)-linkkiä
3. Liitä "3. Add this code to your website:" -kentästä kopioitu HTML-koodi kenttään "Vapaat otsikkokentät:".
4. Tallenna tekemäsi muutokset "Tallenna muutokset"-painikkeen kautta.

Tämän jälkeen fontti määritetään vielä sivuston CSS-tiedostoon:

1. Klikkaa "Muokkaa ulkoasua"-linkkiä
2. Mene "Lisäasetukset"-välilehdelle ja klikkaa "Avaa CSS-editori »"-linkkiä

3. Liitä "4. Integrate the fonts into your CSS:"-kentän koodi CSS-tiedostoon riville "font-family: 'xxxxxx', xxxxxx;". Eli korvaa vain tämän rivin kaksi jälkimmäistä määritystä, jossa määritetään sivustolla käytettävä fontti. Jos CSS-tiedostossa ei näy "font-family" kohtaa voi sen lisätä "body"-kohtaan "font size"-rivin alle.

4. Klikkaa vielä "Esikatselu"-painiketta, niin näet toimiiko fontti sivuillasi. Tämän jälkeen voit tallentaa CSS:n "Tallenna CSS"-nappia painamalla.

Muistathan, että käsittelet CSS-tiedostoa varoen, sillä vahingon sattuessa sivusto voi mennä rikki. Mikäli olet hieman epävarma mitä olet tekemässä, voit pyytää asiakaspalveluamme tekemään fonttien lisäämisen puolestasi. Tässä tapauksessa muista toimittaa kopioimasi koodinpätkät  asiakaspalveluumme, jotta saamme fontit asennettua.

Avainsanat: ulkoasu, fontit, tekstityylit, vinkit, google