 |
| Google WebFonts |
Sopivalla tavalla erottuvat kirjasimet(fontit) esimerkiksi kirjoitusten otsikoissa piristävät blogin ulkoasua jo huomattavasti ja niitä voi käyttää tehokeinona houkuttelemaan lukijoita. Eiväthän lehdetkään sisällä pelkästään yhtä ja samaa kirjasintyyppiä vaan ne pyrkivät ohjaamaan lukijan katsetta käyttäen erikokoisia, vahvuisia ja mallisia fontteja. Siksi bloggaajankin on syytä miettiä voisiko blogiaan piristää kokeilemalla jotain uutta fonttia vaikkapa blogin sivupalkissa.
Bloggerissa sisäänrakennettuna löytyvä Mallinsuunnittelutyökalu antaa sinun ottaa käyttöön useita erilaisia fontteja. Vaikka palvelun valikoima onkin laaja tarjoaa Google vielä enemmän:
Google WebFonts
Vaikka blogger blogiin on jo tarjolla useita fontteja Google WebFonts laajentaa tätä valikoimaa entisestään. WebFonts palvelun fontit on helppoa ottaa käyttöön ja fonttien toimivuudesta ei tarvitse huolehtia sillä ne ovat Googlen omalla palvelimella.Miten fontin saa käyttöön?
- Ensiksi suunnistetaan osoitteeseen http://www.google.com/webfonts.
- Löydettyäsi fontin jota haluat käyttää klikkaat vain fonttia, se ohjaa sinut uudelle sivulle jossa näet tarkemmin miltä fontti näyttää eri kokoisinaja tämän jälkeen valitset vain palkista kohdan "Use this font"
- Tältä sivulta löydät 2 erillistä lähdekoodin pätkää, jotka sinun tulee liittää oman sivustosi lähdekoodiin, että saisit kyseisen fontin käyttöösi.
- Koodin pätkien liittämisen jälkeen voit käyttää valitsemaasi fonttia mielinmäärin täysin ilmaiseksi.
Mitä siis tehdään?
Joudut siis muokkaamana hieman blogger blogisi lähdekoodia:
Ensimmäinen koodinpätkä joka kertoo blogger blogille sen missä kyseinen fontti sijaitsee:
<link href="http://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" type="text/css">
Ei käy aivan suoraan blogger blogiin kopioitavaksi vaan joudut vielä sulkemaan kyseisen koodinpätkän lisäämällä / merkin:
css"/>
Tehtyäsi tämän pienen muutoksen liitä muokattu koodi suoraan<head>tagin alapuolelle. Koodinpätkän tulee olla ensimmäinen asia tagin alapuolella tähän tapaan:
<head> <link href="http://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" type="text/css"/>
Toinen koodin osa
Toinen WebFonts koodin osa on CSS osa. CSS määrittelyn mahdollistaa sen että voit käyttää haluamaasi fonttia silloin kun sinä haluat ja missä kohtaa blogiasi haluat.
h1 { font-family: 'Aclonica';, arial, serif; }
Sinun tulee liittää tämä koodi sivustosi CSS osaan tai muokata jo olemassaolevaa CSS määrittelyä. Tunnistat css osan helpoiten siitä että se sisältää samankaltaisia osia kuin sinun liitettävä koodisi, sillä kaikissa tapauksissa blogger blogeissa ei ole mitään erikseen määriteltyä CSS -osaa.
Toisinaan blogipohjissa on määritelty CSS osion alku ja loppu tähän tapaan:
Alku: <style type='text/css'> Loppu: </style>
Tämän nopean näpertelyn jälkeen voit käyttää uutta fonttiasi blogitekstissäsi.
Leipätekstissä voit käyttää fonttiasi haluamassasi kohtaa esimerkiksi tähän tapaan :
Kirjoitusta joka ei ole valitulla fontilla <div style="font-family: 'Fonttisi nimi', serif;"> teksti valitsemallasi fontilla </div> Kirjoitusta joka ei ole valitulla fontilla
Blogger blogeissa on useinmiten määritelty millaista fonttia missäkin sivuston osassa kuten: otsikko, blgikirjoituksen otsikko, leipäteksti tai sivupalkin otsikot jne käytetään. Voidaksesi siis vaihtaa jonkin sivustolta jo löytyvän osan fonttia joudut muokkaamaan jo olemassaolevaa CSS-koodia eikä sinun silloin tarvitse liittää 2. koodin pätkää blogisi CSS:ään.
Erilaisten blogipohjien CSS-määrittelyt poikkeavat toisistaan ja siksi minun onkin mahdotonta sanoa mitä osaa juuri sinun tulisi muuttaa, että saat fontin käyttöön haluamassasi osassa blogiasi. Tässä on kuitenkin hieman ohjeita siitä miten toimia:
Yleisimpiä määrittelyjä (eivät kuitenkaan aina päde):
- Blogin Otsikko : h1
- Kirjoituksen otsikko : .post h3 tai .post-title
- Leipäteksti : .post-body
- Sivupalkki : .sidebar h2
.post-body {
font-family: 'Valitsemasi fontin nimi';
}
Tämä näyttäisi omallla esimerkkifontillani Aclonica seuraavalta:
.post-body {
font-family: 'Aclonica';
}
Jokainen blogiteema on hieman erilainen, joten nämä ohjeet toimivat vain suurimmassa osassa blogger blogeja. Jos sinulla on kysyttävää fonteista, CSS:stä tai siitä miten saisit fontin näkymään omassa blogissasi jätä kysymyksesi kommenttina. Autan aina kun voin.
Asiaa, olet varsinainen bloggaajan Stockmann. Kiitos siitä.:)
VastaaPoistayritin tehdä ohjeiden mukaan, mutta ei onnistunut :(
VastaaPoistaKyllähän tämän ohjeen pitäisi vielä voimissaan olla. Eli tietääkseni mikään ei ole muuttunut siinä miten Google web fontteja käytetään. Mutta tarkistan asian laidan.
PoistaKyllä näyttää vielä toimivan, eli ohjeessa ei ole vikaa. Vilkaisin pikaisesti blogiasi ja havaitsin että jotain on hieman pielessä. Linkitys (<link href..... ) on oikein, mutta CSS ainakin tällä hetkellä väärässä paikassa.
PoistaMiten laittaisin sen, haluaisin lato fontin. Mitä olen mahtanut tehdä väärin? :/
PoistaBlogisi lähdekoodissa on nyt aikamoinen sotku:
Poistafont-family:"Open sans;.post-body {
font-family: 'Lato', sans-serif;
}font-family: 'Pontano Sans', sans-serif;.post-body{
font-family: 'Lato', sans-serif;
}
koetappas muotoilla tämä uudelleen vaikkapa näin:
.post-body {
font-family: 'Lato', sans-serif;
}
!HUOM! Tällä hetkellä blogissasi on 2 css-määritelmää nimellä .post-body tämä ei tietenkään vaikuta mihinkään muuhun kuin siihen että koodi näyttää sotkuiselta. Kannattaa kuitenkin yhdistää nämä kaksi eri määritelmää, ettei tarvitse etsiskellä tulevaisuudessa muokattavia kohtia usealta eri riviltä. Eli voit myös poistaa tuon ylläolevan "sotkun" kokonaan ja etsiä tämän olemassaolevan kohdan blogisi koodista:
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
ja lisätä siihen lato fontin css määritelmän näin:
.post-body {
font-family: 'Lato', sans-serif;
font-size: 110%;
line-height: 1.4;
position: relative;
}
Uskomatonta ! Nyt toimii ! Kiitos kovasti sinulle :)
PoistaSen vielä haluaisin tietää, että miten määrittelen otsikon vielä erikseen. Pitääkö nyt uudesta fontista kanssa hakea uusi linkkipätkä, kun se on erilainen kuin tekstin fontti?
PoistaEli aina jos haluat uuden google webfontin joudut lataamaan uuden link pätkän sekä määrittämään CSS osan siihen minkä haluat muuttaa. Otsikko on blogien css koodissa määritetty h1 eli linkin lisäämisen jälkeen etsi vielä tuo h1 ja lisää tai muuta fontin määritelmä samaan tapaan kuin body osassakin.
Poistamyöskin mulla jäi kommenttien tekstit tosi pieniksi ja haluaisin saada ne samanlaiseksi lato fontiksi !
VastaaPoistaKommenttiteksti määritellään css-osassa kohdassa .post-footer. Eli lisää lato fontin css määritelmä myös tähän.
PoistaKiitos kovasti ! :) Hienoa, että maailmassa on tälläisiä auttaivaisia ihmisiä niinkuin sinä
PoistaMoikka! Voinet varmaan auttaa. Tajusin tuon ensimmäisen osan mutten löydä kohtaa mihin tunkea tuon CSS-muutoksen.
VastaaPoistaEli CSS muutos tulee lisätä blogisi css koodissa siihen osaan johon haluat muutoksen näkyviin. CSS-koodin määritykset ovat muotoa: .jokinmääritelmä, #jokinmääritelmä jne...
PoistaEsimerkki: Haluat muuttaa blogisi (http://kakkutaikuri83.blogspot.fi) blogin leipätekstin toisenlaiseksi tulee fontin CSS-määritelmä asettaa esim määritykseen:
.post-body {
margin:.5em 0 1.5em;
border-bottom:0px dotted #999999;
padding-bottom:1.5em;
}
Tähän tapaan:
.post-body {
margin:.5em 0 1.5em;
border-bottom:0px dotted #999999;
padding-bottom:1.5em;
font-family:'*******',******;(haluamasi fontin määritys)
}
Aa, ok. No kokeillaanpas :D
PoistaOkei, fontin osasin vaihtaa, mutta miten sen kokoa saa vaihdettua?
PoistaFontin koko määritellään esimerkiksi näin font-size: 14px;
Poistaeli
.post-body {
margin:.5em 0 1.5em;
border-bottom:0px dotted #999999;
padding-bottom:1.5em;
font-family:'*******',******;(haluamasi fontin määritys)
font-size: 14px;
}
Muutat vain tämän 14px sen kokoiseksi kun tarvitset. Esim 12px, 32px jne...
No kiitosta taas ;D Pari pikkupikku asiaa vielä, jos maltat vastata. Tuo sivupalkin profiilikuva ei siirtynyt tekstin mukana, koitin kaikkiin tunkea sitä keskitysjuttua muttei auttanut. Ja toiseksi, tunnisteosio ja kommentointiosio tekstin alalaidassa keskittyi mutten saanut sitten noita jakopainikkeita siirtymään.
PoistaEli bloggerin omien jakopainikkeiden keskittäminen on hankalaa, koska niitä ei ladata oman teemasi kautta vaan muualta. Tämä sanottuna ei kuitenkaan kannata heittää kirvestä kaivoon. Sillä voit lisätä blogisi css osaan kohdan:
Poista.post-share-buttons {
margin-left: 50px;
}
Tämä siirtää nappeja 50px oikealle.
HUOM! 50px ei välttämättä ole oikea siirtymä, eli joudut kokeilemaan mikä luku on oikea omaan blogiisi.
En nyt tiedä mitä profiilikuvaa mahdat tarkoittaa, sillä blogissasi näyttää ainakin omasta mielestäni kaikki olevan kunnossa.
hei miten voi käyttää jotain muuta fonttia kuin tuon google webs fontin fontteja ?
VastaaPoistaeli siis miten voisin käyttää esim dafont.com'ista haluamaani fonttia :) ?
Tämä muuttuu hieman hankalammaksi/ maksulliseksi. Fontteja joita voit lisätä omille sivuillesi ei tarjota kovinkaan monessa paikassa mutta ladattavia fontteja tarjotaan kyllä paljon. Kuten arvata saattaa näitä koneelle ladattavia fontteja ei saa ilman lupaa käyttää internetjulkaisuissa ja yleensä luvan hankkiminen maksaa.
PoistaJos satut löytämään täysin ilmaisen fontin jota haluaisit käyttää joudut itse etsimään tilan tätä fonttia varten, tämä tietenkin vaatii omaa kotisivutilaa jonkin palvelimen nurkasta jne. Eli taas joudutaan rahakukkarolle tai sitten joudut ottamaan käyttöön ilmaisen ja samalla epäluotettavan palvelun.
Yksi varteenotettava vaihtoehto lisäfonttien etsimiseen voisi olla vaikkapa Fonts.com joka tarjoaa ilmaista vaihtoehtoa banneria vastaan. Löytyy myös maksullisia kattavampia vaihtoehtoja 10$/v tai 100$/vuosi.
Perus ajatuksena on se että mitä tahansa fonttia ei voi käyttää missä tahansa ilman maksua. Suurin osa "ilmaisista" fonteista on tarkoitettu käytettäväksi ainoastaan yksityisiin kirjeisiin tms. Fonttien tekijät kun haluavat palkkaa työstään ja ottavat sen niiltä jotka haluavat julkaista jotain käyttäen heidän fonttiaan (internetsivut, blogit, lehdet, mainokset jne..).