The best solution is to package the fonts within your skin so there is not any dependency problems, but this also creates a possible limitation that you must define your fonts when making your skin. If you wanted to change the fonts you would have to repackage and install the fonts. If you wanted to use the same skin on multiple sites with different fonts you must create seperate skin packages accordingly.
There really isn't too much more involved than deploying to a typical HTML page.
1. You need to create your font package using CC Website Font as you normally would.
2. Once done copy the 'websitefontdata' folder into the main folder of your skin.
3. Update the skin template pages (.html) and add the script code from Website font to the top of the page, before any table or div tags. On DNN skin template pages it isn't full HTML so these pages do not have a head section. I have tested with my machine running Windows 7 (64 bit) with IE 8, Firefox, and Safari (all running as 32 bit apps). NOTE: This will not work in a 64 bit browser until Adobe gets Flash updated to 64 bit.
4. You need to modify the script code to fix a reference. DNN will automatically correct the paths in the link href and script src sections. However, it will not create the correct path within the javascript code that calls the replacement function. You must add <%= SkinPath%> before the 'websitefontdata/fonts/yourFavoriteFlashFont.swf.
Sample
<!--COFFEECUP WEBSITE FONT CODE BEGIN-->
<link rel="stylesheet" href="websitefontdata/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="websitefontdata/sIFR-print.css" type="text/css" media="print" />
<link rel="stylesheet" href="websitefontdata/all.css" type="text/css" media="all" />
<script src="websitefontdata/sifr.js" type="text/javascript"></script>
<script src="websitefontdata/sifr-config.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var h1_font = {
src: '<%= SkinPath%>websitefontdata/fonts/JOEBOB_graphics___Billie_Kid[regular].swf'
~~~~~ The previous line is where you need to insert the <%= SkinPath%> replacement token, and for other fonts if setting up multiple fonts. Remainder of script section is unchanged. ~~~~~~~
<!--COFFEECUP WEBSITE FONT CODE END-->
<link rel="stylesheet" href="websitefontdata/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="websitefontdata/sIFR-print.css" type="text/css" media="print" />
<link rel="stylesheet" href="websitefontdata/all.css" type="text/css" media="all" />
<script src="websitefontdata/sifr.js" type="text/javascript"></script>
<script src="websitefontdata/sifr-config.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var h1_font = {
src: '<%= SkinPath%>websitefontdata/fonts/JOEBOB_graphics___Billie_Kid[regular].swf'
~~~~~ The previous line is where you need to insert the <%= SkinPath%> replacement token, and for other fonts if setting up multiple fonts. Remainder of script section is unchanged. ~~~~~~~
<!--COFFEECUP WEBSITE FONT CODE END-->
Now repackage your skin and upload and voila!!
Food for Thought: If you are running DNN 5.3 or greater you can use the replacement token <h1>[Portal:PortalName]</h1> and now your skin will pull the portal name to use for the header with whatever font you have defined. This would let you install the skin at the host level and drop it in for multiple sites!!
If the user does not have Flash installed then the text will just show up as whatever your H1 tag is CSSed to, definetly not a game stopper as they will be able to still see the text.
The only real annoying issue with getting this setup was I could not just create a plain HTML text file to test the font maker because the browsers will not run the javascript on local files and I just haven't taken the time to setup a localhost server. Secondly, obviously uploading the skin package 50 times until I figured out all the DNN replacement and path problems.
Hope this helps someone else out there,
Jason S
aka. SolidSnake