Creating Custom Fonts for your Website or Blog

There are many ways to add custom fonts to your website or wordpress blog however today I will be focusing on the best way to implement custom fonts on your website.

Being a code enthusiast you may already know that various operating system (e.g. Windows 7, Mac Os X Lion) are all shipped with a limited amount of fonts an this pose a huge challenge to web developers since there is no guarantee that the font you use as part of your web project will be available on your clients or end users computer thus render your creativity null and void.

With the introduction of @font-face css rule end-users are now able to download specified fronts stored on your website servers and render your webpage correctly if the user does not have the font installed on her/her computer.

This is great new since web developers are no longer required to use so call “Web Safe Fonts”.

Implementation of @font-face css rule is quite simple, First you need to download the desired font-face kit, my favorite site is http://www.fontsquirrel.com . Ensure that you select TTF, EOT, WOFF and SVG that way you know that you are covering ever major browser used by the end users.

Upload all the content of the zip file into a folder name “fonts” (that’s optional but it’s a great way for proper organization of files) in the root of your site or wordpress theme e.g “ public_html/fonts “ or in a template you place the font folder in the theme folder like this “ …/themename/fonts”.

Create the following declaration in your css style sheet replace “Font-Name” with the actual name of the font uploaded to the server in the previous step.

@font-face {
    font-family: 'FontName';
    src: url('fonts/Font-Name.eot');
    src: url('fonts/Font-Name.eot?#iefix') format('embedded-opentype'),
         url('fonts/Font-Name.woff') format('woff'),
         url('fonts/Font-Name.ttf') format('truetype'),
         url('fonts/Font-Name.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal; 
}

To use the font on your website simple create your styles and include the font name that you already defined in the @font-face rule.

h3 {
	margin:0;
	padding:0;
	font-size: 18pt;
	font-family: 'FontName',Arial, sans-serif;
	color:#BCBCBC;
	font-weight:normal;
}