Use Font Image Replacement Technique

From Snapp CMS Developer Documentation

Contents 1 Step 1 - Configure CMS 1.1 Add Javascript Libraries 1.2 Upload Fonts 1.3 Edit Configuration File 2 Step 2 - Edit Your Site 2.1 Edit Your Style Sheets 2.2 Add Javascript to onLoad Event

Step 1 - Configure CMS

Add Javascript Libraries

Add the Mootools (1.11 or 1.2) javascript library

<script type="text/javascript" src="<?=$cms->loadJS('mootools')?>"></script>

Add the CMS Fonts Library

<script type="text/javascript" src="<?=$cms->loadJS('cms.fonts')?>"></script>

Upload Fonts

Upload your TTF (True Type Fonts) of OTF (Open Type Fonts) to you site under

/custom/fonts

If the folder does not exist simply create the folder

Edit Configuration File

Add a new Section to your configuration file

[Fonts]

Then add a new key/value par for each new font that you have uploaded using the following convention

font-family="true-type-font.ttf"

eg: tribalbenji = "Tribal_Font.ttf"

Step 2 - Edit Your Site

Edit Your Style Sheets

Add the font family value entered into the configuration file to the font-family: for the elements you want to change

eg:

H1 { font-family:tribalbenji, Arial, Verdana,Helvetica;}

Add Javascript to onLoad Event

Add the following code to you pages onLoad Event to Initalise for Font Replacement Engine

cms.fonts.init(); 

You have two options for performing the font replacement.

1) Auto (All Header Tags)

cms.fonts.auto();

2) Manual and Selective Replacement

$$('h1')..each( function(el) { cms.fonts.replace(el); });