Zoals je hebt kunnen zien hier zijn er weer een aantal wijzigingen doorgevoerd in het design hier en één daarvan is het gebruik van een specifiek font. De methode die ik hiervoor heb gebruikt is Cúfon en ik heb van een paar van jullie al de vraag gekregen of ik wil delen hoe dat het beste te implementeren is.

Het eerste wat je moet doen, uiteraard, is bepalen welk lettertype/font te wilt gebruiken. Gebruik bijvoor

beeld het fonts archief hier of op Delicious mocht je op zoek zijn naar inspiratie, maar wat bovenal belangrijk is dat je het font mag

gebruiken zoals je dat zou willen; kijk dus goed naar de licentie die er bij hoort.

Stappenplan Cúfon Installatie Stappenplan

1. Font Generen Nadat je een font hebt gedownload ga je naar de Cúfon site en selecteer je de betreffende opties en upload je het font wat je eerder gedownload hebt. Nadat alle juiste opties hebt aangevinkt genereert de site een versie van je font in javascript welke je direct kunt downloaden.
2. Javascript uploaden Het font javascript moet vervolgens een plekje vinden in je theme folder. Mijn voorkeur is om daar een map fonts voor aan te maken in /wp-content/themes/jouwtheme/fonts of /wp-content/themes/jouwtheme/includes/. In deze map hoort het gegenereerde .font geüpload te worden samen met cufon-yui.js welke je hier kunt downloaden.
3. De scripts activeren Deze beide scripts zul je vervolgens moeten activeren in je theme via functions.php.

   function add_cufon(){
   ?>
   	<script src="<?php bloginfo('stylesheet_directory') ?>/includes/cufon-yui.js" type="text/javascript"></script>
   	<script src="<?php bloginfo('stylesheet_directory') ?>/includes/Jouw-lettertype.font.js" type="text/javascript"></script>
   	<script type="text/javascript">
   		Cufon.replace('h1',{ hover: true })('h2', {hover:true})('#blog-title', {hover:true})('#blog-description', {hover:true})('h3', {hover: true})('h4', {hover: true})('h5', {hover: true})('h6', { hover: true })('.aside h3', { hover: true});
   	</script>
   <?php
   }
   add_action('wp_head', 'add_cufon');

   De voorbeelden die je hier ziet staan in regel 6 zijn voorbeelden van classes en id’s die met je nieuwe fonts moeten werken.

4. En IE dan? Inderdaad.. ook hier moeten we IE een beetje helpen met een klein stukje jQuery:

   //Cufon MS_IE fix
   function add_cufon_iefix(){
   ?>
   	<script type="text/javascript"> Cufon.now(); </script>
   <?php
   }
   add_action('wp_footer', 'add_cufon_iefix');

That’s it. Nadat je je functions.php hebt bijgewerkt zul je zien dat je site nu de betreffende classes en ID’s keurig toont met het nieuwe font. Easy peasy.