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


Kommentit

2.11.2013 18:55  Jussi Jalkasen

Onhan tämä älytöntä, ettei teidän editorilla voi valita haluamiaan fontteja suoraan! Toiseksi olen huomannut, ettette ilmoita kuvakokoa - ja etusivun bannerihin. Kuva näkyy milloin minkäkin laisena. Ilmoitatte vain, että liian suuri. Pituus vai leveys on liian suuri. Tarkat koot jakeluun tai teidän editorin selkeä kuvakoot muokkari.

Olen ymmärtänyt, että panttaatte paljon tietoa, jotta teiltä tilattaisiin editointipalvelu.

30.7.2013 14:21  Heikki / Kotisivukoneen Asiakaspalvelu

Moi Teresa,

Fontit ovat tyystin ilmaisia, eikä niiden käyttö toki maksa yhtään mitään!

- Heikki

4.7.2013 17:35  Teresa Moorhouse

Hei,

Kysyisin maksavatko Google fontit ja niiden käyttö webbissä jotain?

9.12.2013 14:44  Koukku

Tämä Google-fonttien käsite on hieman vieras, voisitteko vähän selventää sitä? Ensimmäisenä tuli mieleen se teksti Googlen-logossa, jossa joka kirjain on omalla värillä.

Eli siis mitä noilla google-fonteilla tarkoitetaan? Fontteja, joita ei ole Microsoft-Wordissa, mutta joita kaikki nettiselaimet tukevat vai mitä?

22.1.2014 13:55  Tiina / Kotisivukone

Googlen tarjoamat fontit ovat ilmaisia, vapaasti verkossa käytettäviä fontteja, jotka on helposti lisättävissä kotisivuille. Yleensä kotisivuilla esitetyt fontit on kannattanut rajata vain niihin yleisimpiin kirjasintyyleihin, jotka on asennettu käyttäjän koneelle. Muiden fonttien käyttö on aiheuttanut hieman ylimääräistä teknistä vaivannäköä tai erikoisemmat fontit on esitetty kotisivuilla kuvina, joka taas ei ole hakukoneystävällistä. Nyt Google tarjoaa jo useita satoja erilaisia fonttiperheitä, voit tutustua niihin osoitteessa: www.google.com/fonts

Kotisivukone on uudistamassa kotisivujen ulkoasun muokkausta. Uuteen ulkoasun muokkaus työkaluun on lisätty jo valmiiksi useita erilaisia Googlen fontteja, jolloin fontit ovat editorista suoraan valittavissa. Uusi tapa muokata ulkoasua mahdollistaa muutenkin entistä monipuolisemman tavan muokata kotisivujen ulkoasua mieleisekseen. Voit lukea lisää ulkoasun muokkauksen uudistuksesta seuraavasta tiedotteesta:
www.kotisivukone.fi/uutiset.html?98


Kommentoi kirjoitusta


Nimi:*

Kotisivun osoite:

Sähköpostiosoite:

Lähetä tulevat kommentit sähköpostiini