Coding Tutorials Tutorials

Making Font Downloads

Want to provide cool fonts on your site to your visitors but don't know how? Read on.

You want to make a preview image for your visitors to see what font it is that they are going to download, so make a reasonably good size page (I went for 255 by 108 pixels) and add a background. Here is my example below.

You have to have the desired font installed into your computer.
Select a font that you'd like visitors to download and start typing the name of the font on the page. Add any effect you want on it. I am using "Tahoma" font, and a drop down effect (eye candy plugin) on PSP. See how mine turned out below.

Now you got your font image, you want to link it to your actual font. But first we have to find the font.
Either go into your Control Panel and search for it there or open up My Computer >> Local Disk >> WINDOWS >> Fonts. You will see a whole list of fonts. Search for the one you was working with and copy and paste it to your documents somewhere. Make sure you do not delete any other file from the Local Disk folder! (It will kill your computer)

Find the font on your documents and drag it (or copy and paste/upload) to your FTP. I suggest you make a folder called "fonts" or "downloads", so you know where to find them for future fonts you want to provide. Upload the font image you created, either to your site or to one of the image hosting sites like photobucket.

Create a new html or php page and add this code:

<a href="http://YOURSITE.COM/fontfile.ttf"> <img src="http://YOURFONTIMAGEHERE.png" border="0"></a> Take note what format the file is, most font files are in .TTF. You can also send zip files; compress your file and upload it to the site and change the .ttf with .zip

If you want to make more font downloads, I suggest to keep the base style the same.

If this tutorial has helped you, please link back http://sugaryparadise.net on your site, thank you. Feel free to contact me for further details or any problems.

Used a tutorial? Let me know through MySpace! :D