Header Ads

Google webfonts - välj ditt eget teckensnitt

Blogger ger oss möjligheten att välja font (teckensnitt) på både rubriker och text via Malldesignern men kanske hittar du inte riktigt rätt utseende där och vill få lite mer att välja på. Då kan du med ett par enkla tillägg i din kodmall utnyttja Googles Webfonts, 698 olika teckensnitt!

Börja med att gå till sidan Google Web Fonts och välj bland alla de teckensnitt du hittar där. Du kan byta exempeltexten mot din egen genom att klicka i rutan jag markerat och skriva in den text du vill testa. Bra om du vill se hur just din rubrik skulle se ut.



När du hittar ett teckensnitt du gillar klickar du på den lilla rutan med en pil i, "Quick use".



Skrolla ner litegrann och där hittar du en flikruta med koder. Välj den första, Standard.

Kopiera hela raden (jag klippte av lite för att få ett bra skärmklipp) och gå sen till din bloggs kodmall.



Kodmallen hittar du här:


I början på din mall hittar du ett stycke som omringas av taggarna <head> kod </head>. 
Det är här du ska lägga in den kod du hämtade från fliken Standard i bilden ovan. Lägg den precis innan taggen slutar, som jag gjort, före </head>


När du har gjort det ska du lägga till ett tecken, ett snedstreck  /  för att din blogg ska godkänna koden. Det betyder att din font-kod ska se ut så här;

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css' />

Nu stämmer ju inte teckensnittet i koden ovan, du väljer din egen variant, men det är det lilla snedtecknet på slutet du måste lägga till själv. Gör ett mellanslag mellan ' och / så stämmer det bra.

När du har kommit så långt kan du spara din mall.


Nu finns möjligheten att använda ditt nya teckensnitt, men för att det ska synas där du vill måste du lägga till det i koden på rätt ställen också.

För varje slags rubrik och också för brödtexten kan man välja font-familj i koden, "font-family".

.Header h1                        är din bloggrubrik.
.Header .description        är beskrivningen under rubriken
h3.post-title                      är inläggsrubrikerna
div.widget > h2                är rubrikerna på dina gadgets i din sidebar
h2                                      är också gadgetrubriker, det beror på vilken mall du har
.tabs-inner .widget li a    är länkarna i din meny
body                                  är den löpande brödtexten i din blogg, alltså den vanliga texten

Om du nu vill ändra teckensnitt i din bloggrubrik ska du i din kodmall klicka med musen och sen trycka Ctrl + F för att få fram en sökruta. I den sökrutan skriver du in .Header h1 

På Google Web Font sidan hämtar du namnet på din font och klistrar sen in den på rätt plats i din kodmall. Se till att också kopiera ev ' ' tecken som står runt fontens namn, de är viktiga.



Både header-koden och de andra finns på flera platser, men du ska välja den där font-namn finns angivna. Så här ser det ut:


Det finns två rader med font-namn, den första raden börjar med default="normal normal etc. Den ska du inte röra.
Den andra raden börjar med value="normal normal etc. Det är här vi ska lägga till vårt teckensnitt.
Det ska ligga före de andra, t.ex. Arial, Tahoma och liknande, direkt efter storleken på texten. Glöm inte att lägga till ett kommatecken efter ditt importerade teckensnitt och se till att få med ' ' tecknen runt namnet om det har såna. De håller ihop namn som innehåller flera ord.

Klicka på Förhandsgranska och spara om du är nöjd.

Vill du lägga till samma teckensnitt för flera rubrikalternativ går det bra att göra likadant med dem.

Det här ser kanske krångligt ut, men det är egentligen bara två steg och de ger dig möjlighet att verkligen personifiera din blogg!
Lycka till!


1 comment:

  1. Den som läser detta vittnesmål idag borde fira med mig och min familj eftersom det hela började som ett skämt för vissa människor och andra sa att det var omöjligt. Jag heter Göran Jörgen och är från stockholm, men jag flyttar till Chicago USA med min fru. Jag är lyckligt gift med två barn och en vacker fru. Något hemskt hände med min familj, jag tappade jobbet och min fru lämnade mitt hus eftersom jag inte kunde ta hand om mig själv och familjen. henne och mina barn vid den tidpunkten. Jag lyckades i nio år, ingen fru stödde mig för att ta hand om barnen. Jag försöker skicka ett testmeddelande till min fru men hon hindrar mig från att prata med henne. Jag försöker prata med hennes vän och hennes familj men jag vet fortfarande att någon kan hjälpa mig och jag har skickat begäran senare till så många företag, men ändå ring inte mig, förrän en trogen dag kommer att jag aldrig kommer att glömma i mitt liv . När jag träffade en gammal vän till mig som jag förklarade alla mina svårigheter och han berättade för mig om en bra man som hjälpte honom att få ett bra jobb på Coca cola-företaget och han berättade för mig att det var en caster-charm, men jag är en person som aldrig tror på trollformler, men jag bestämde mig för att prova och Drosagiede instruerade mig och visade mig vad jag skulle göra i dessa tre dagar av lunchen. Jag följer alla anvisningar och gör vad han bad mig göra bra. Drosagiede se till att allt gick bra och min fru skulle se mig igen efter det underbara arbetet Drosagiede. Min fru ringer till mig med ett okänt nummer och ber om ursäkt och hon sa till mig att hon verkligen saknar mig och våra barn och min fru kommer hem. Och efter två dagar ett företag som jag har skickat mitt tackbrev kallat, nu är jag den föredömliga företagschefen här i USA. Jag rekommenderar att om du har några problem skicka ett meddelande till detta e-postmeddelande: doctorosagiede75@gmail.com eller whatsapp +2349014523836 så får du det bästa resultatet. Ta saker för givet och det kommer att tas bort från dig. Jag önskar dig det bästa.

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------