zondag 4 april 2010

Je eigen fonts voor Blogger van Kernest


Wil je eens wat anders dan altijd maar Times, Trebuchet, Arial en die andere overbekende fonts? Dan had je tot nu toe een probleem, want als je een mooi ander font in je site gebruikt, is de kans groot dat browsers ze niet herkennen en toch weer een default tonen. Ontwerpers wilden ze niet zomaar vrijgeven, en concurrerende browserbouwers werden het niet eens over een standaard. Bijgevolg kan je in het aanpassingsscherm voor 'fonts en kleuren' in Blogger maar weinig opwindends kiezen.
Bij het maken van dit blog ontdekte ik in een post van Liz Castro de oplossing: Een ontwikkelaar in Minneapolis met de Nederlands klinkende naam Garrick van Buren heeft (legaal) letterlijk honderden fonts op zijn server gezet, en uitgezocht hoe hij ze op een verteerbare manier aan de diverse browsers kan opdienen. Het werkt in elk geval in IE en Chrome. De kopletter die zo goed past bij de retro schrijfmachine in mijn blog is het resultaat, en het invoeren ervan viel (voor Blogger!) best mee. Liefhebbers vinden de gebruiksaanwijzing onder de vouw.
Om de fonts in je blog een eigen gezicht te geven, moet je er eerst een uitkiezen. Ga daarvoor naar Kernest.com en maak een account (zo gebeurd).

Daarna wordt het even zoeken naar het font dat precies bij je past. Ze zijn gesorteerd op ontwerper en je kan zoeken op naam, maar al je geen fan bent van een daarvan is dat een langdurig gokwerk. De handigste manier is om te kiezen voor bijvoorbeeld Serif, en dan in een van de rijtjes met onbekende namen te klikken op 'alle...'. Er verschijnt dan een groot scherm waarin de fonts worden getoond, met daaronder een menu om te kiezen wat je wilt zien.

Zie je iets interessants, klik dan op de naam van het font. Je kan dan (in zo'n zelfde groot scherm) het font in verschillende kleuren en maten bekijken. Dat laatste loont zeker de moeite: sommige fonts zijn minder helder als je ze iets kleiner wilt tonen dan maatje koeienletter.

Heb je je keus gemaakt, dan vul je de url in van de website waarop je het font (of bijvoorbeeld alle serifs) wilt kunnen gebruiken. (Had je dat al eens gedaan, dan verschijnt er een link: 'Add this font to... je site'.) Na de klik op de knop toevoegen, flitst er een iets te optimistische boodschap langs dat dit is gebeurd: je moet het gewoon met de hand toevoegen.
Het stukje code dat je daarvoor nodig hebt verschijnt gelukkig ook. Dat ziet er ongeveer zo uit: 'link href="http://www.kernest.com/JOUW-SITE-URL.css" media="screen" rel="stylesheet" type="text/css"' (met html-haken zijn in plaats van enkele aanhalingstekens). Zorg vooral dat je de precieze naam copieert van het font dat je wilt gebruiken, inclusief hoofdletters, want je hebt die naam straks nodig.

Je bent nu klaar met Kernest: op naar het binnenwerk van je bloggerblog.
Ga naar je Dashboard op Blogger en klik bij layout/indeling op: html bewerken. Als je bang bent je hele blog te verwoesten, maak dan helemaal bovenaan even een backup. Mocht het misgaan, dan open je die, je copieert de tekst en plakt hem gewoon in het html-venster dat je nu ziet. Loop nu de volgende puntjes na.

  • In dat venster zoek je naar de tag 'head'. Daaronder plak je nu je code. Blogger kan de letter nu gaan gebruiken, maar je moet hem wel vertellen waar. Dat doe je in ditzelfde scherm. (Negeer het eerder genoemde aanpassingsscherm, dat nog steeds alleen standaardfonts toont.)
  • Als je na het plakken iets naar beneden scrollt, zie je een lijstje variabelen waarin kleuren en fonts worden gedefinieerd. De eerste daarvan heet 'bodyfont'. Die definieert alle tekst op je pagina en je kan hem het beste negeren. Daaronder staan 'headerfont'; die variabele bepaalt het uiterlijk van de koppen in je zijkolom en de datum die boven je blogposts staat. Een goede plek om je nieuwe font te gebruiken. Er staan daar een of meer fonts ingevuld. 
  • Om je nieuwe font te gebruiken, plak je de (correct gespelde!) naam vooraan in die rij. De oude fonts kan je eventueel laten staan als tweede keus, of voor 't geval je de zaak wilt terugdraaien. Achter de naam van jouw nieuwe font komt in dat geval een komma.

Klik nu niet gelijk op 'opslaan', maar bekijk eerst het effect door te klikken op 'voorbeeld'. Je browser opent dan een nieuw venster of nieuwe tab waarin je kunt zien hoe het gaat worden. Ben je tevreden, klik dan pas op 'opslaan'.

Zo ga je verder: 'pagetitelfont' verandert alleen je blogtitel, 'descriptionfont' de beschrijving daaronder, en 'postfooterfont' alles wat onderaan je blogposten verschijnt (soms nog wat extra's, afhankelijk van het template dat je gebruikt).

Soms is het heel moeilijk te ontdekken welke variabele je moet hebben om een stukje van je site te veranderen. Het kan helpen om de source van je blog te bekijken (ga naar het gewone webadres en doe een rechterklik om die optie te kiezen) en in deze broncode te zoeken naar de tekst die je wilt veranderen. Zo ontdek je hopelijk hoe dat element heet en dat kan je vervolgens opzoeken in de html waarin je zit te werken.
Maar lukt dat niet of heb je niet genoeg tijd of geduld, dan bereik je in elk geval al een cool effect door je titel of koppen te veranderen!

7 opmerkingen:

**EYE-SNACKS** zei

Hoi Elise,
Ik zou graag de koppen op een handgeschreven manier neer willen zetten in mijn blog.Dat ziet er dan wat losser uit.Heb al een aantal keren geprobeerd dat te doen volgens je beschrijving maar wat ik verkeerd doe weet ik niet. In ieder geval is het me nog steeds niet gelukt!
Heb ik iets over het hoofd gezien?
Groetjes, Ingrid

Elise Friedmann zei

Ha Ingrid,
Heb je geprobeerd een font van Kernel te gebruiken? Als ik naar de broncode van je pagina kijk, zie ik daar niet de link die je nodig hebt. Het is een beetje moeilijk op afstand te beoordelen wat er mis is gegaan, maar als je een font ophaalt van Kernel krijg je een code die je in de 'head' sectie van je pagina moet zetten. En als gezegd, bij jou staat hij er niet.
Heb je wel die code?

**EYE-SNACKS** zei

Hoi Elise,
Ja ik heb geprobeerd een font van Kernel te gebruiken. Omdat het me iedere keer niet lukte heb ik de codes weer weggehaald.Vandaar dat je het waarschijnlijk niet kon zien.Ik ga het nu nog een keer proberen en dan laat ik staan wat ik heb gedaan. Misschien zie je dan wat ik verkeerd doe.
In iedergeval alvast bedankt voor je hulp. Grinnik en ik zal je blog volgen want ik zocht terug op 'schrijven en kijken ipv zien '

**EYE-SNACKS** zei

Hoi Elise,

Ik heb 'Fat finger' er staan en als het goed is de code onder head gezet. Fat finger heb ik bij de variablen blog title staan. Ik heb gekeken bij voorbeeld maar er verandert niks.
Kan jij het zien ? Ik weet echt niet wat ik verkeerd doe.

Elise Friedmann zei

Ah ik zie het al: je bent de weg kwijtgeraakt tussen alle haken denk ik. als je de Blog Title Fat Finger wil maken moet je het volgende veranderen:

jij hebt: (haken heb ik weggelaten)
Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif"
Daar staat FF dus niet bij. verander dat in:
default="normal normal 200% 'Fat Finger' etc

en bij
Variable name="descriptionfont" description="Blog Description Font"
type="font"
'Fat Finger', default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"

kan je de Fat Finger weer weghalen... tenzij je dat ook in FF wilt. In dat geval moet je de naam van het font verplaatsen naar default. de syntax is:

type="font" default="normal normal 95% JOUW FONT,Georgia, Serif">

Overigens kan je volgens mij de komma'tjes ook wel weghalen bij Fat Finger, als je de fontnaam maar exact hetzelfde spelt als Kernel.

Nou ben ik benieuwd! Ziet er verder wel heel smakelijk uit hoor, met die snoepjes :)

**EYE-SNACKS** zei

Hai Elise,

dankje voor je hulp en zo snel alweer. Ik heb precies gedaan zoals je hebt geschreven maar..euh bij mij werkt het niet.Ik heb het ook opgeslagen en de pagina ververst,zeg maar. Vreemd hoor!

Elise Friedmann zei

Nee idd werkt niet. Misschien omdat je de grootte hebt gezet op 2000%?
Probeer dat te veranderen in 200%
btw heb je geen Twitter oid voor deze discussie?

Een reactie posten