22 Oct 2014

Har inte tidigare satt mig in i hur man använder skräddarsydda fonter på sin hemsida. Men det är enklare än jag trodde det skulle vara. Allt står på den här sidan.

Det första steget är att lägga till en rad i bloggens php-mall (i sektionen "header") som ser ut så här:

<link href='//fonts.googleapis.com/css?family=Cousine:400,700,400italic,700italic&subset=latin,latin-ext&effect=emboss|static' rel='stylesheet' type='text/css'>

Exakt hur den ska se ut förklaras på länken ovan. Det här är det typsnitt som jag själv använder. 

I länken ska det anges vilka varianter som man ska använda och vilka specialeffekter som man är ute efter. I det här fallet använder jag typsnitt i två tjocklekar (400 och 700), samt effekterna "emboss" och "static". Effekten "emboss" används på alla rubriker i bloggen.

Sedan kan man använda fonten direkt via en inline stylesheet eller, som vanligt, i CSS-mallen. I min mall ser det ut på följande sätt:

h1 {
    font-size: 40px;
    font-family: 'Cousine', font-weight: 700;
    color: #565656;
}

Vill man använda någon av specialeffekterna omgärdar manSkräddar exempelvis rubriken men en "div class" på följande sätt.

<div class="font-effect-emboss"><h1>{{ record.title }}</h1></div>

Voila! Så kan man åstadkomma precis vilka specialeffekter som helst och få tillgång till nästan vilka fonter som helst. Och jo, ett tips - ta bort delen "http.//" och ersätt med "//" enligt ovan så fungerar det även på SLL-krypterade sidor.

CS 

Kommentarer till detta inlägg







Fler inlägg ...