WordPress: inserire i web fonts tramite cufon JavaScript

Esistono diversi modi di integrare i web fonts in un tema di WordPress. Uno di questi prevede l'uso di quelli che vengono definiti cufon JavaScript. Il problema maggiore di questa soluzione è che questi script richiedono più tempo per essere elaborati, quindi si tende ad inserirli nel footer del tema. Vediamo come fare.

Supponiamo che avete deciso di usare il font Colaborate di cui volete usare le varianti Medium e Regular. Quindi avrete i seguenti file JavaScript:

1. Colaborate-Regular_400.font.js
2. Colaborate-Thin_400-Colaborate-Medium_400.font.js
3. cufon-yui.js

Create una directory nella vostra directory di upload di WordPress e caricate questi tre file. Ora avete bisogno di aggiungere un altro file JavaScript, che potrete chiamare load.js, il quale effettuerà appunto il caricamento del web font:

Cufon.set('fontFamily', 'Colaborate-Thin');
Cufon.replace('.slide h2.title, .slide p, h1.category-title, p.category-tagline',{textShadow:'1px 1px 1px rgba(0, 0, 0, 0.3)'})('.widget h3.widgettitle, .comment-meta',{textShadow:'1px 1px 1px #fff'})('h2.post-title, h3#comments, .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6');

Cufon.set('fontFamily', 'Colaborate-Medium');
Cufon.replace('.slide h2.title span, .slide p span, p.category-tagline span',{textShadow:'1px 1px 1px rgba(0, 0, 0, 0.3)'});

Cufon.set('fontFamily', 'Colaborate-Regular');
Cufon.replace('span.drop-caps',{textShadow:'1px 1px 1px #fff'})('.wp-pagenavi span[class!=pages]')('.wp-pagenavi a',{hover:true})

Ovviamente all'interno del metodo replace() potete specificare gli elementi che volete usando una sintassi CSS.

A questo punto dovete modificare il vostro file footer.php per inserire questi quattro script:

<?php
$uploads = wp_upload_dir();
$path = $uploads['baseurl'];
?>
<script type="text/javascript" src="<?php echo $path;?>/colaborate/cufon-yui.js"></script>
<script type="text/javascript" src="<?php echo $path;?>/colaborate/Colaborate-Thin_400-Colaborate-Medium_400.font.js"></script>
<script type="text/javascript" src="<?php echo $path;?>/colaborate/Colaborate-Regular_400.font.js"></script>
<script type="text/javascript" src="<?php echo $path;?>/colaborate/load.js"></script>

<?php wp_footer(); ?>	
	
</body>
</html>

Una soluzione alternativa sarebbe quella di usare le action di WordPress su wp_footer e aggiungere gli script in questo modo. Tuttavia non sono molto convinto che questa sia la scelta giusta a livello di performance del CMS, in quanto costringe WordPress ad eseguire un'ulteriore rielaborazione del contenuto.