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!


No comments

-------------------------------
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.
-------------------------------