Keresés a blogban

2010. szeptember 27.

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

23 megjegyzés:

ÉdesMindegy írta... [Válasz erre...]

Kedves Wise Lady!
Szeretnék Neked adni egy Kreatív Blogger Díjat, amivel kifejezem a hálámat és köszönetemet a sok segítségért.
Kérlek látogass el a blogomba, hogy elolvashasd a díjjal kapcsolatos teendőket.
Üdvözlettel: ÉdesMindegy

Wise Lady írta... [Válasz erre...]

@ÉdesMindegy
Köszönöm :) Nagyon megtisztelő!

Fahéjasalma írta... [Válasz erre...]

Szia! Kipróbáltam, de valamiért nem működik. :-(
Mi lehet a hiba?
Ezt írja ki: "A sablonod formázási hiba miatt nem értelmezhető. Győződj meg arról, hogy a sablonban az összes XML-elem megfelelően le van zárva.
XML-hibaüzenet: The reference to entity "subset" must end with the ';' delimiter."
Úgy csináltam, ahogy írtad. Többször is megpróbáltam.

Fahéjasalma írta... [Válasz erre...]

Úgy néz, mégis sikerült, köszi! :-)

Ujlaki Ágota írta... [Válasz erre...]

Fahéjas alma mit csináltál? Én is ugyanezt a hibajelzést kapom. Többször próbáltam és mégis :-(

Wise Lady írta... [Válasz erre...]

@Ujlaki Ágota
Közvetlenül a Googlefontsból másold ki a kódot, és azt illeszd be, ne iktass közbe Jegyzettömböt pl.

Wise Lady írta... [Válasz erre...]

@Ujlaki Ágota
Rájöttem a megoldásra, az ottani kód hibás! Javítsd ki, a posztban olvashatod UPDATE alatt.
Kösz a jelzést.

Ujlaki Ágota írta... [Válasz erre...]

Most úgy illesztettem be, ahogy írtad, mégis kiírja uazt a hibajelzést.
Végre találtam egy érthető oldalt. Azt hittem könnyebben fog menni.

Wise Lady írta... [Válasz erre...]

Ez lehetetlen! Ha úgy írtad be, akkor működnie kell. Ha írsz emailt a Kapcsolat oldalról, akkor levélben kibogozhatjuk, hol a bibi.

Zsuzska írta... [Válasz erre...]

Szia !

A hibaüzi ua. mint a fentieknél: "A sablonod formázási hiba miatt nem értelmezhető. Győződj meg arról, hogy a sablonban az összes XML-elem megfelelően le van zárva.
XML-hibaüzenet: The reference to entity "subset" must end with the ';' delimiter."
Gondoltam ha kiveszem a subset - et és helyére írom ezt ; , akkor jó lesz. Sikerült is menteni a sablont, hibaüzi nincs ,VISZONT A BETŰFORMA SINCS SEHOL. Tudnál segíteni ?
Köszönöm szépen : Zsuzska

Zsuzska írta... [Válasz erre...]

A SEHOL azt jelenti, hogy nem is tudom igazán hol kellene látnom :( A bejegyzések betűtípusai között, vagy a sablonszerkesztő betűkészletében ?
Egyikben sincs egyébként :)

Wise Lady írta... [Válasz erre...]

@Zsuzska
A hibaüzenet az UPDATE-ben jelzett módon küszöbölhető ki.
A fontot egyik szerkesztőben sem fogod megtalálni, úgy kell használni, ahogy a cikkben leírtam. Vagy a bejegyzés írásakor te teszed bele, vagy állandóra bekódolod pl. a posztok címe legyen ilyen. Ez a poszt erről szól.

Zsuzska írta... [Válasz erre...]

Köszi. Akkor maradok a szövegrészletnél, mert állandóra sehogy sem sikerül bekódolni, mindig kiírja a formázási hibát.

Zsuzska írta... [Válasz erre...]

Hát , nekem ez sem sikerül:(
Beillesztettem a 1. pontban megadott linket az új bejegyzésbe és persze, hogy nem demo-d szerinti betűformát láttam, hanem az alapértelmezettet. Elküldöm e-mailban, mert biztosan hihetetlen!

von Birken írta... [Válasz erre...]

Eleddig jól működött, de mostanság valóban nem engedi menteni a sablont, hiába javítom a kacsacsőrt... Ahogyan Zsuzsika írta: "The reference to entity "subset" must end with the ';' delimiter."

Wise Lady írta... [Válasz erre...]

@von Birken
Az eredeti kódot másoltad ki, zárókacsacsőrt is javítottál?
Nekem működik, még mindig.
Ha ebből a posztból másolsz kódot, akkor esetleg érdemes "átküldeni" a HTML átalakítón! (Itt az oldalsávban). A sablonok nagyon eltérhetnek egymástól.

Ramimami írta... [Válasz erre...]

Az első kódot sikerült beillesztenem, el is fogadta a sablon, miután átküldtem a HTML átalakítón.
Csak a szövegrészletet akarom kijelölni, figyeltem a kacsacsőrre is, de az elölnézetben is csak a betűméret lett 24-es, de a típus nem lett Rennie. Visszanéztem a html-szerkesztésben, de ott is csak ez látszik:

kacsacsőr span style="font-size: 24px;">A TE SZÖVEGED, AMIT EZZEL A TÍPUSSAL AKARSZ ÍRNI</span kacsacsőr

Most hol a hiba?
Köszi,
Ramóna

Wise Lady írta... [Válasz erre...]

@Ramimami
Kihagytad a betűtípust a kódból (pont a lényeget :))):

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

WL

Ramimami írta... [Válasz erre...]

Igen. Az a szitu,hogy eredetileg benne volt, utána meg eltűnt. Pedig ebből a postból másoltam mindent. Ennyire nem szeretne engem a blogspot?

Maja írta... [Válasz erre...]

Ha belepusztulok se sikerül :((
Pedig nem vagyok béna az ilyen dolgokhoz és megpróbáltam más leírás alapján is, mégsem változik meg a betűtípus.Mindegy...Majd még próbálkozom vele.

Vera írta... [Válasz erre...]

Hogyan állítom át a bejegyzés címének a betűtípusát ha én vettem betűtípust? help, please....

Névtelen írta... [Válasz erre...]

Maja írta...

No, azért rájöttem (most kezdtem megint foglalkozni vele) Azért nem jelent meg, mert a gépemen nem volt telepítve az a betűtípus. Amikor olyat írtam be, ami volt, egyből megjelent a blogomon.

Névtelen írta... [Válasz erre...]

De tudtommal ez a lényeg! Mármint, hogy nem kell telepítve lennie a fontnak!

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-