Google fonts for Blogger - Eltérő betűtípus használata

Az előző cikkben szó volt a weben használható betűtípusokról, most megnézzük, milyen lehetőségünk van saját tárhely nélkül más betűtípus használatára. Erre is létezik több megoldás, ezek egyike a következőkben leírt.

Használjuk a Google fontokat!
A Google az alkalmazások egész családját hozta létre, ezek segítségével komplex webes rendszer alakítható ki. (Blogger, Analytics, Feedburner, Gmail, Picasa stb.).
Számos más, a blogolást segítő dolog is elérhető általuk, scriptek, kódok pl., de ilyenek a fontok is.
Bár most még kevés fontból választhatunk, ezzel mégis színesíthetjük egy kicsit a blogunk kinézetét.
Használatuk nagyon egyszerű:

Menj ide: http://code.google.com/webfonts

Felül választhatsz Görög, Latin, Khmer és Cirill betűcsaládot.
Ha kiválasztottad, pl. Latin, válassz betűtípust, amelyik neked tetszik, és alkalmazni szeretnéd: pl. Reanie Beanie
Kattints rá, akkor láthatod, hogyan néz ki különböző betűnagysággal, továbbá, hogy milyen változatai vannak.

Válaszd a Get the code gombot, kattints rá.

Másold ki a felső ablakban lévő kódot:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'/>

Irányítópult -> Tervezés -> HTML-kód szerkesztése

Ctrl+f 
Keresd meg a </head>
sort, és ELÉ másold be a kimásolt kódot.
Mentsd el a változtatást.

Mostantól használhatod a betűtípust.

1. Ha csak egy szövegrészletet akarsz ezzel a típussal pl. a poszton belül, akkor ezt kell tenned:
   Írd a posztot, de válts át a HTML írásmódra. A kívánt szövegrészletet zárd ebbe a kódba:
   

   <span style="font-family: Reenie+Beanie; font-size: 24px;">A TE SZÖVEGED, AMIT EZZEL A TÍPUSSAL AKARSZ ÍRNI</span>
   

   DEMO: A szöveg akár a teljes poszt is lehet.
   
   
   
2. Ha egy részletre a blogban állandóan és automatikusan ezt a típust akarod használni:
   Először is tudnod kell annak a résznek a nevét, hogyan nevezték el a sablonban.
   Példaként én most azt mutatom meg, hogy a posztok címei hogyan jelenhetnek meg az új betűtípussal.
   
   A) Egyik eset, hogy szerencséd van, és a kódod elején megtalálod, ahol a változókat (Variable definitions) sorolják fel, valahogy így néz ki:
   

   <Variable name="post.title.font" description="Title Font" type="font"
   default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px 'Trebuchet MS', Trebuchet, sans-serif;"/>
   

   
   Nincs más dolgod, mint beszúrd az új betűtípust legelsőnek ide:
   

   <Variable name="post.title.font" description="Title Font" type="font"
   default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px 'Reenie Beanie', 'Trebuchet MS', Trebuchet, sans-serif;"/>

   
   Mentés
   
   Nézd meg a blogod. Elképzelhető, hogy a betűnagyságon is változtatnod kell, tedd meg. A kék számot írd át nagyobbra vagy kisebbre, és mentsd.
   Ezt az új, sablonszerkesztőből választott sablonok esetében biztosan megtalálod így.
   
   DEMO: http://3teszt.blogspot.com/
   
   B.) Ha régebbi vagy egyedi sablonod van, akkor előfordul, hogy nem találod a Variable definitions részben a poszt címet. Akkor meg kell keresned:
   
   Ctrl+f
   Írd a keresőablakba: posts
   Ilyesmit találsz: /* Posts ----------------------------------------*/
   Ez alatt lesz a poszt címe, ami vagy post-title vagy .post title vagy .post h3 stb. névvel van elnevezve
   Pl. ilyen lehet:
   

   .post h3 {
      margin:.25em 0 0 140px;
      padding:0 0 4px;
      line-height:1.4em;
      color: $titlecolor;
      margin-bottom: 3px;
      font: 17px 'Reenie Beanie', georgia, times, 'times new roman', serif;
      font-weight: bold;
      background:transparent;
   }
   

   
   Szúrd be a betűtípusod nevét (piros) a megfelelő helyre elsőként.
   A betűnagyság a kék szám itt is.
   Mentsd el a változtatást.

Ha meguntad és másik típust szeretnél, akkor csak a két helyre beírt nevét kell megváltoztatnod: Pl. Reenie Beanie helyett beírod, hogy Philosopher mindkét helyen.

Ha végleg meguntad, és az eredeti állapotot akarod visszakapni, akkor kitörlöd a betűtípus nevét, beállítod a betűnagyságot, mentés.

UPDATE:
Többen jeleztétek, hogy hibaüzenet jön, nem tudjátok a kódot beszúrni. Ennek az az oka, hogy amikor kéred a kódot, akkor egy ilyet lehet kimásolni:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>

Sajnos ezt elszúrták, HIBÁS! (Explorerben előfordulhat az is, hogy a végén lévő kacsacsőr egyáltalán nem is másolódik ki, mert a kód hosszabb, mint az ablaka.)
A pirossal jelzett zárókacsacsőr ROSSZ! Át kell javítani erre: />
Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady