Implementing Custom Fonts without a Line of Script

Whether one is running a Blog on WordPress or Blogger, lately all users seem to have one vital need : The desire to install and implement Custom Font . Customized Font will in fact add that extra needed detail to any Blog /Site and enable it to stand apart from the rest of those ‘ hum drum ‘ sites which tend to use the regular allowed computer fonts such as ; Arial, Georgia, Times, Sans Serif fonts .

However , as beautifully distinctive as custom font may be on certain Blogs /Sites and simple as it may seem when a particular user has managed to add that custom font , ( and as much as we desire the same for our own blogs ), I can assure you it is not such an easy feat to accomplish and the reasons vary .

The truth of the matter is : it is quite a complicated undertaking ( for the novice ) – not only in installing your desired custom font , but simply the entire process by which one must go through in order to have the finalized custom font display properly . Then there is another problem : your custom installed font ( which you went through so much trouble in converting to the appropriate extensions of .eot, .svg & .ttf formats ) may finally end up NOT showing up on another users browser who happens to land upon your page ! This is of course due to the fact that this particular user may not have that particular font on their system or , you may have high resolution and the other user may have low resolution, which will make your custom font appear ‘ choppy ‘ ( or simply put : not so nice as it appears on your own system ) .

What is a blogger who desires some nice custom font to do without having to go through the trials of Job to achieve desired results ? – and without having to go through the tedious task of finding the right font , making sure it is a commercial font ( permissible by its author ), having to download it , convert it to the appropriate extensions , re-downloading it again and then having to write code and finally go through the process of having to write the @font face declaration ( as well as having to change every quoted line of font declaration in their source document ) for the custom font to take effect ?

Well….there is a very simple process which will help put an end to all of the above known issues associated with installing custom font ! In fact , this process is so simple that all you will have to do is : Choose your desired ” Free Permissible Font ” , click on ” Get Code ” and simply copy and paste the code into your source document – without you having to write one single line of code or script ! Did I also mention that it will NOT slow your page load time as other scripts such as cufon javascript will ? ( cufon javascript slows a page’s loading time like no other source of script can ! and I advise anyone against it .) This particular script loads just great , I have tested it on my own blog just to ensure it loads smoothly ( albeit the custom font I have on my own page is pure code & @fontface declarations and aside from this – my custom font runs throughout my entire blog and not only the Headers ).

This Custom Font Script will ONLY effect the Header font of one’s blog and not the BODY font ( so let us clarify that from the onset ) . However , from what I have seen by user comments / remarks , is that they simply want to implement custom font for their Headers ( such as : h1, h2 , h3 etc ) . Thus , if your blog has 3, 4 , 5 or 6 different headers , this Custom Font Script will change those headers to your desired chosen Custom Font .Herein , I will describe how one can implement Custom Font on their Blog for both platforms [ WordPress & Blogger ], and I shall begin with instructions for the WordPress Platform .

The Following Custom Font Settings Apply only for the WordPress Platform

My search turned up 2 plugins – which both led me back to WordPress.org ! Needless to say : I was elated there existed alternative solutions to enabling custom font on one’s blog / site . After discovering both of these solutions [ plugins ] , I looked into both of them ; as to what they offer a user and user flexibility , along with page load time . Deduction : Both plugins work great – however : only one ( 1 ) of these plugins grant a user a ‘ Script ‘ or enabled piece of code by which to copy and paste into their page source document – which means : a user can copy this code / script and implement it on any given platform ; whether you are on the Blogger Platform , running your own self hosted Website or whatever have you . The only platform where a user will not have to copy and install the font ‘ manually ‘ is WordPress . For the WordPress platform , the user will simply go to their PLUGINS ( on their dashboard ) , select ” Add New ” and once you are taken to the plugins page , simply type ‘ FontBurner ‘ into the search box and the plugin will come up on the plugin results page .

Follow the instructions as per use , proceed to Download the FontBurner plugin ( choose your version of WP, as some of you may not have updated to the lates 2.9 & may be on previous WP versions , therefore pay attention to which version you are downloading ) -once you have downloaded the FontBurner plugin , go to your C-Panel on your host server and Upload the zip file to your wp- content /plugins folder . Once the upload is completed , decompress the contents of the plugin zip file and you are done . The FontBurner plugin will appear in your WP Dashboard under your Plugins. Once this is done , simply go to your WP Dashboard / Plugins / Installed , look through your installed plugins , locate your FontBurner Plugin and ‘ Activate ‘ it . After you have activated your FontBurner Plugin , return back to the main Dashboard and look at your ” Settings ” – you will see the FontBurner plugin there . Once you click on FontBurner , the settings page for it will be activated. You will now have the option to choose amongst the 1,000 Free Fonts available for it by simply going to FONTBURNER site and choosing ” Fonts ” from the main list .

The fonts page will open up where the listed fonts will appear within an alphabetical ordered list under ” Font Search” starting from A-Z [ please look down to your lower left of the page as the lettering is quite small & some users may be lookin
g for the available Fonts to be displayed - which is not the case here , its kind of tricky ] ; choose from any letter of the alphabetized list under the Font Search e.g : ” A ” will display a list of fonts beginning with A such as : Ad Mono, Accidental President, Acens , etc ( you get the point ) . Once you have found the desired font which you wish to use – WRITE the name of the font down ( in case you dont remember it , or simply as to not mispell it ) and return to your FontBurner Settings Dashboard page – you will see the preset font which came with the FontBurner plugin already existent in the Settings – you can change it now to the desired font you have chosen .

You may choose to use your desired font for all headers or – you may choose to use 4 different types of fonts for all four (4) available FontBurner headings ( which I dont quite recommend – try sticking to 2 different fonts ; personally , I prefer 2 simple fonts to run throughout my entire page/blog . ) however 3 is good as well . Please ensure that you DO NOT CAPITALIZE the name of the font and that you leave NO SPACES between the font name e.g : if the name / title of the font you have chose is : Accidental President , you must type it into the header settings as : accidental_president . If you capitalize or allow spaces , your font will not render ! Which means that your regular header font which was originally on your theme will display and NOT your custom font ( just a forewarning ) .

Once you have decided on the font of your choice and you have inserted / typed it into all of the available 4 headings , you may now choose the color of your header font as well as the hover color settings . This plugin is so easy to customize that even one who has never done so before will find it extremely simple . Therefore , once you have your chosen font , header colors, hover colors all set , you may now scroll down to the bottom of your FontBurner Settings Dashboard and hit the ‘ Save ‘ button . You are all done and ready to view your page ! Your custom font is there now . Now if you get tired of your custom font and you want something different , all you will need to do is simply go back to FontBurner.com and go through the listed available fonts and choose a different font and repeat the above process – it’s that simple .

There is also a 3rd plugin : TypeKit Fonts , which has many options , however , you will have to apply the @fontface declaration – and I am not sure as to whether you want to go this route , but you can download this plugin right HERE . Please ensure you read the installation instructions carefully before you download anything . Most users find their given plugins dont work , not due to bugs or anything wrong in the Authors script ( which is not uncommon ) ; but due to the fact that they DONT FOLLOW INSTRUCTIONS . Therefore , please DO read the instructions / directions prior to downloading anything – and once you do, you may be surprised that it actually does in fact WORK !

The Following Settings Apply for the Blogger Platform

Now as for the Blogger Platform , things are simple from here on end and do not require all of the above configurations and various settings . In fact out of the above 3 plugins , only one ( 1 ) can be installed for the Blogger platform and in essence , a user on the Blogger platform will have nothing to upload nor download , alter nor customize – other than choosing their desired Free Font type . Yes, you read correctly . You will not have to do any of the above described steps which apply to the WordPress platform , other than to simply go to FontBurner.com , navigate to the Font page , and choose the desired custom font from the Font List [ Search ] offered .

Once you have chosen your desired custom Font e.g : Font Search , [letter] B : Font Type “Bellrose Light” - now you can either choose to ” View Font “ , so as to see how this particular Font Face looks ( uppercase, lowercase, numbers, etc ., ) before you actually decide to use it , or – if you simply like what you see within the particular Font Type , you can simply choose to ” Get Code “ . Once you choose the ” Get Code “ , a new page will open displaying the given code for your particular Font . Copy the code , log into your Blogger account >/ Dashboard >/ Layout >/ HTML >/
(** you DO NOT need to Expand Widgets for this procedure ). Apply ( paste ) the Copied Code above the </head> line and hit the ‘ Save Template ‘ button . You are DONE !

View your page – you will now see your custom Font displayed on all of your headers . Please take notice :: If you wish to change the font color for your custom header font please follow the instructions below :

Once you have chosen your desired custom Font and are given the following code [ this code is for the Font Face called :Amerika Sans ] ::.

Amerika Sans Font Code

1
2
3
4
5
6
7
8
9

 
<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner_print.css" type="text/css" media="print" />
<script src="http://www.fontburner.com/fontburner.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://www.f
ontburner.com/js/black/amerika_sans.php">
</script>
<!-- sIFR fonts delivered by www.fontburner.com -->

Amerika Sans JS Code

Amerika Sans PHP Code for Header Colors

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
var amerika_sans = { src: 'http://www.fontburner.com/flash/amerika_sans.swf' }; sIFR.prefetch(amerika_sans); 
 
sIFR.delayCSS = true; sIFR.activate(amerika_sans); sIFR.replace(amerika_sans, { selector: 'h1, h2, h3, .amerika_sans,
 
#amerika_sans' ,css: [ '.sIFR-root {color:#000000;}' ,'a {color:#000000; text-decoration: underline; 
 
font-weight:normal; }' ,'a:link {color:#000000; text-decoration: underline; font-weight:normal; }' ,'a:hover 
 
{color:#000000; text-decoration: underline; font-weight:normal; }' ,'a:visited { color: #000000; text-decoration: 
 
underline }' ,'em { color: #000000; font-style:normal; font-weight:normal; }' ,'strong { color: #000000; 
 
font-weight:normal; font-style:normal; }' ] ,offsetTop:0 ,marginBottom: 0 ,verticalSpacing: 0 ,wmode: 'transparent' });

Once you are done with the color changes , please ensure that you save ( download ) this code and UPLOAD it to your host ( such as dropbox or any other host which allows you to save / upload a PHP file ) . After you have uploaded your color configured file , simply copy the LINK to the file and paste it back to the line of code you copied it from :

EXAMPLE ::

1
2
3
4
5
6
7
8
9
10
11
12

 
<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner.css" type="text/css" media="screen" />
 
<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner_print.css" type="text/css" media="print" />
 
<script src="http://www.fontburner.com/fontburner.js" type="text/javascript"></script>
 
<script type="text/javascript" src="http://www.YOUR_NEW _COLOR_CONFIGURED_FILE.com/js/black/amerika_sans.php></script>
 
 
 
<!-- sIFR fonts delivered by www.fontburner.com -->

Paste it into your source document || Blogger >/Dashboard>/Layout >/HTML>/ :: above the </head> line and hit ‘ Save Template ‘ . Your new color customized Font Headers are now ready .

I hope this article has been of help to any of you who had desired to install Custom Font headers to your page / blog site . For those of you on WordPress , you will definitely have much more freedom / flexibility with these plugins as you will be able to manipulate their settings from your WP dashboard . For those of you on the Blogger Platform , this is simply just one more way of installing Custom Fonts into your blog . There are many other tutorials and you can find them on here just look up @ the >/ TYPOGRAPHY nav bar link and you can visit the articles posted here which contain tutorials on Typography & Custom Font enabling ( you may also conduct your query under the >/RESOURCES link ), or simply just view the Related Articles below this post . If you try this custom font enabling method and you encounter any problems , please feel free in contacting me and I will try to connect with you and walk you through the process – but I believe that you will do just great ! So, go ahead : get your Custom Font On !