Cufon on Nokia and Blackberry phones

April 20th, 2010

Apparently Nokia (Symbian / s40 / s60) and Blackberry mobile phone web browsers don’t support the Cufon technique of using any font you like on a web page.

I’ve been building a site where the client wants a specific font to be used for page headings. Cufon fits the bill except for when you try and view the site on a Nokia or Blackberry phone. In these cases the page headings are completely missing. Not desirable. So I created a little script to sniff these fellas out and serve them with plain old CSS instead.

Here is is:

<head>

<title>Cufon test</title>

<?php

if (eregi(“BlackBerry”, $agent) || eregi(“Nokia”, $agent)) {

echo “”;

}

else { ?>

<?php }?>

</head>

<head>
<meta charset=”utf-8″ />
<title>Cufon test</title>
<link href=”screen.css” rel=”stylesheet” type=”text/css” />
<?php
if (eregi(“BlackBerry”, $agent) || eregi(“Nokia”, $agent)) {
echo “”;
}
else { ?>
<script type=”text/javascript” src=”cufon.js”></script>
<script type=”text/javascript” src=”tuffy.js”></script>
<script type=”text/javascript” src=”scripts.js”></script>
<?php }?>
</head>

I also wrapped a conditional comment round the IE specific script that is placed before the </body> tag to stop Nokia and Blackberries from attempting to call a non declared function:

<!–[if IE]>
<script type=”text/javascript”> Cufon.now(); </script>
<![endif]–>
</body>