You supply the artwork… we’ll build the skins!™

The DotNetNuke community is one of the best around
which makes contributing so much easier

You are here: Blog
Saturday, November 18, 2017

Dotnetnuke, Web Design and Online Marketing articles

Using custom fonts in a DotNetNuke skin

Jan 18

Written by:
Wednesday, January 18, 2012  RssIcon

Using custom fonts in a DotNetNuke skin
When converting a design to a DotNetNuke skin the fonts are always a subject of high importance. The known standard web fonts supported by all browsers in all platforms is quite limited so we either have to replace fonts with something more standard or have to find a way to include the fonts in the web.

Google Web Fonts is a nice option but you are limited to the list of fonts available online (+400 at the time of writing). So if you need a special font not available on Google’s list you are out of luck.

Cufón

Cufón is another solution aimed at solving this problem. By using this alternative you are on longer limited by any restriction and you can use whatever font you have. Currently supported fonts include TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript.

Cufón consists of two parts: a font generator and a Javascript engine.

Cufon explanation

For a more in-depth discussion take a look at the Cufón wiki.

A good thing about Cufón is that it is supported by all major web browsers:

  • Internet Explorer 6, 7, 8 i 9
  • Mozilla Firefox 1.5+
  • Safari 3+
  • Opera 9.5+
  • Google Chrome 1.0+
  • iOS 2.0+
  • Opera Mini

Font Generator

The first step in order to use the Cufón system is to convert the original fonts to a proprietary font format based on SVG fonts.

The Cufón font generator accepts the original font files and generates the custom files you will later on use on the script.

The Rendering engine

The rendering engine is a custom Javascript that will render the actual fonts based on the files generated.

How to include Cufón in a DotNetNuke skin

In order to use Cufón in a DotNetNuke skin you have to reference two javascript files:

  • Cufon-yui.js – This is the base rendering engine.
  • The javascript that the font generator will create based on you fonts.

Once the files are referenced you can create custom font replacements in a similar way as you would do by using CSS selectors.

For example, to set all H1 headers to a custom font, create a javascript block and call:

Cufon.replace('h1');

You can include all the replacements in a separate Javascript file and reference the file as you did with the previous two files:



<dnn:dnnjsinclude pathnamealias="SkinPath" filepath="js/cufon-yui.js" runat="server">dnn:dnnjsinclude>
<dnn:dnnjsinclude pathnamealias="SkinPath" filepath="js/YourFont.font.js" runat="server">dnn:dnnjsinclude>
<dnn:dnnjsinclude pathnamealias="SkinPath" filepath="js/cufon-replacements.js" runat="server">dnn:dnnjsinclude>



Licensing

In order to use Cufón, one important thing to check is the license of the font. Not all fonts allow for public, unrestricted web use; so check the legal aspects of your fonts before using them with Cufón.

Copyright 2009 - 2011 PSDtoDNN - You supply the artwork… we'll build the skins!™
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation