How to install a Typopixo font

When you buy a Typopixo webfont, you'll receive a .zip package containing two Javascript files, a PNG file (which includes the whole font) and a HTML testfile. For the implementation of the font on your website you'll only need the Javascript files and the PNG file.
Give it a try by downloading our free demo font!

You can easily install the font by following these 4 steps:

Step 1


Include a JQuery.

For the webfont to work correctly you'll need to include a jQuery, so make sure you include the following script:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Step 2


Include the Typopixo library

In the .zip package you'll find a Javascript file named alphabix-1.0.js. This file is the Typopixo library. You need to copy this file to the server of your website (for instance to the js folder). After that include the library with the following script:
<script src="typopixo-1.0.js"></script> or, if you just copied the library to the js folder: <script src="js/typopixo-1.0.js"></script>

If you've placed the library in any other folder on your server, just replace js/ for: name_folder/ (as long as you include the path to the folder of placement).

Step 3

The font PNG

As mentioned before, the .zip package contains a PNG file which bears the name of the font you just purchased (for example zita.png) and includes all glyphs of the font. Copy the PNG file to your server. It is advisable to create a new folder on your server called 'fonts' and place the file there. If, of course, you've already got such a folder, just place the PNG file there.

Step 4


Include the font Javascript

There's one Javascipt file left in your .zip package and that is the font .js (i.e. zita.js). Copy the js file to your server as well (you can also place it in the fonts folder on your server) and include it in your website with the following line:
<script src="zita.js"></script> or: <script src="fonts/zita.js"></script> (make sure you include the path to the folder which contains the js file)
NOTE! The js file you just included contains the location of the PNG file you placed on your server at step 3. To make sure the path in this file is correct, open the file in a text editor and include the path to the PNG file in the following line:
zita['Bitmap']="fonts/zita.png";

Using a Typopixo font


When you've included the Javascript files, Typopixo fonts work exactly the same as normal fonts.
After following the steps above your webpage should look somewhat like this:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="typopixo-1.0.js"></script> <script src="zita.js"></script> </head> <body> <h1 style="font-family:zita;">Hi!</h1> </body> </html>

If you have any further questions or if you need help with the installation of a Typopixo font, please don't hesitate and contact us !