tässä opetusohjelmassa näytän, miten voit ladata minkä tahansa Google Web fontin Blogger blogiisi. On muutamia tapoja tehdä tämä, mutta näin minä teen sen.
tämä opetusohjelma sopii parhaiten niille, joilla on jonkin verran CSS-osaamista. Tämän opetusohjelman käytän Blogger ’ s ”yksinkertainen” malli.
tässä esimerkki räätälöidystä Google web-font-kirjasimesta, joka on asennettu Lemon Macaron-malliin.
Vaihe 1
ennen kuin aloitamme, suosittelen aina varmuuskopioimaan nykyisen mallin ennen muutosten tekemistä (vain siltä varalta, että jokin menee vikaan).
tämän voi tehdä kojelaudassa menemällä Template > Backup / Restore (sijaitsee oikeassa yläkulmassa) > Download full template.
Vaihe 2
kun olet varmuuskopioinut mallipohjasi, napsauta Muokkaa HTML: ää (olemme edelleen ”Template” – välilehdessä).
Vaihe 3
jätä tämä sivu auki, avaa uusi välilehti tai ikkuna ja siirry Google Web Fonts-sivustolle. Etsi kirjasinta, jota haluat käyttää, ja valitse Quick Use.
valitsin ”Lobster Two” – kirjasimen.
Vaihe 4
osioon 1: Valitse haluamasi tyylit, valitse haluamasi tyylit kirjasimellesi (voit valita useita tyylejä). Muista, että liian monen tyylin valitseminen voi hidastaa blogiasi. Olen valinnut normaali 400 kuten näet alla.
kohdassa 3: Lisää tämä koodi verkkosivustollesi, klikkaa @import-välilehteä.
Vaihe 5
kopioi tiedot @import-ruudussa.
nyt, jättäen tämän sivun auki, palaa blogiisi (jossa valitsit Muokkaa HTML: ää). Aiomme liittää fontin tuontikoodin malliin.
Etsi seuraava teksti, joka sijaitsee mallipohjaeditorin alussa (yleensä riveillä 13 tai 14):
<b:skin>...</b:skin>
kun laajennettu, liitä tiedot, jotka kopioitu @import laatikko Google Web Fonts verkkosivuilla, seuraava teksti:
/* Variable definitions
sen pitäisi näyttää tältä.:
napsauta Tallenna malli. Fonttisi on nyt tuotu! Nyt voit sijoittaa kirjasinperheen sinne, missä haluat sen näkyvän mallissasi.
Vaihe 6
nopeasti, näytän sinulle, miten käytät juuri tuotua kirjasintasi. Tässä esimerkissä, aion käyttää fonttia minun post otsikko. HTML-muokkaimen haussa:
h3.post-title, .comments h4
poista seuraava rivi:
font: $(post.title.font);
ja korvaa se kohdassa 4 luetellulla tekstillä: integroi fontit CSS: ään Google Web Fonts-sivustolla.
font-family: 'Lobster Two', cursive;
sen pitäisi näyttää jotain tällaista, kun olet liittänyt fontin perheen tiedot:
