Custom fonts using Cufon on Windows Phone

Design | Ivan Basic

Custom fonts using Cufon on Windows Phone

Sunday, Mar 10, 2013 • 2 min read

Every major browser platform supports @font-face syntax, except Internet Explorer Mobile on Windows Phone 7.5.This problem can be resolved using Cufon, a javascript text-image replacement solution.

As I described in my last post, @font-face is probably the best cross-platform method for using custom fonts on your website.

Every major browser platform supports @font-face, except Internet Explorer Mobile on Windows Phone 7.5. This problem can be solved using Cufon, a javascript text-image replacement solution that combines HTML5 canvas and VML to render the fonts.

For a start, you can get all the files you need from the Cufon website.

Cufon generator

Here you can upload your fonts in different styles (regular, italic, bold,…), each one should be uploaded separately, and you can choose between various settings. Of course, you should pay special attention to the licencing terms for your fonts. When finished, you will be provided with a javasript file which should be placed on your server. You should also download cufon script from this site.

If you did everything right, you should have two files like this in your folder:

Cufon files

Now you should reference those files in your pages, along with a few additional lines of javascript:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Mono-Regular_400.font.js" type="text/javascript"></script>
         
        <script type="text/javascript">
             Cufon.replace('h1', { fontFamily: 'Mono' });
        </script>
    </head>
    <body>
        <h1>This text will be shown in Mono.</h1>
         
        <script type="text/javascript"> Cufon.now(); </script>
    </body>
</html>

Here we are adding tags and(or) classes inside Cufon.replace function witch will convert text to your custom font. You should also add Cufon.now() function call at the end of the HTML document (just before the body tag), to prevent loading delay that may occur. The process is identical when you have more fonts:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Mono-Regular_400.font.js" type="text/javascript"></script>
        <script src="Warp-Regular_400.font.js" type="text/javascript"></script>
         
        <script type="text/javascript">
             Cufon.replace('h1', { fontFamily: 'Mono' });
             Cufon.replace('p', { fontFamily: 'Warp' });
        </script>
    </head>
    <body>
        <h1>This text will be shown in Mono.</h1>
        <p>This text will be shown in Warp.</p>
         
        <script type="text/javascript"> Cufon.now(); </script>
    </body>
</html>

There is one issue that remains to be solved: line-height css rule is not supported by Cufon. You can work around this limitation by

setting your DOCTYPE declaration to “strict”, but I would not reccomend this solution because it can affect other elements on your website.
Alternatively, you can decrease the value of “ascent” atribute in YourFont.font.js file. This is not a perfect solution, but will work in some cases. Setting margins for particular classes to negative value will also help in adjusting the line spacing.

Since @font-face is a much better solution than Cufon in most scenarios, you should use @font-face on your website, and include Cufon only when a Windows Phone is detected . We use the code below on some MonoX-based projects. Line height problem is resolved with negative bottom margin.

if ((HttpContext.Current.Request.UserAgent.ToLower().Contains("windows phone") || HttpContext.Current.Request.UserAgent.ToLower().Contains("iemobile") || HttpContext.Current.Request.UserAgent.ToLower().Contains("xblwp")) && HttpContext.Current.Request.Browser.MajorVersion < 10)
    {
        string cufon = @"<script src=""yourpathtoscripfolder/cufon-yui.js"" type=""text/javascript""></script>";
        LiteralControl ltlCufon = new LiteralControl(cufon);
        page.Header.Controls.Add(ltlCufon);

        string font = @"<script src=""yourpathtoscripfolder/Mono-Regular_400.font.js"" type=""text/javascript""></script>";
        LiteralControl ltlFont = new LiteralControl(font);
        page.Header.Controls.Add(ltlFont);

        string margins = @"
            $('header h1').css('margin-bottom', '-19px');
            ";

        string classes = @"<script type=""text/javascript"">
            Cufon.replace('h1');
        </script>";

        LiteralControl ltlClasses = new LiteralControl(classes);
        page.Header.Controls.Add(ltlClasses);

        page.ClientScript.RegisterStartupScript(page.GetType(), "coufonNow", "Cufon.now();", true);
        page.ClientScript.RegisterStartupScript(page.GetType(), "coufonMargins", margins, true);
    }

Combination of @font-face and Cufon is probably the safest and most efficient way to cover all scenarios when integrating custom fonts in your designs.