Custom Fonts Without Writing Script

Custom Fonts

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

http://www.dezignmatterz.com/wp-content/uploads/2012/08/s2u_rou_sha_3e012a3.jpg

The ‘ Plugin ‘ for this custom font is called ” Font Burner ” , and I basically discovered it whilst I was attempting to implement custom font for my new WordPress Blog Site ( which is a work in process :D ) . I had been trying the @fontface declaration as I had done on a previous WP theme , however … the @fontface declaration was just NOT working with my new Theme and I tried everything there is – nada ! This theme simply refused to accept any @fontface declaration ! This was quite frustrating and being that I am quite stubborn and refuse to accept defeat , I sat there and contemplated for a few minutes as to an alternative method of installing custom font without having to use the @fontface declaration code . After a few minutes of contemplation I decided to ‘ Google ‘ it : Custom Font Plugins .

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 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 looking 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 Fonts FontBurner.com and go through the listed available fonts and choose a different font and repeat the above process – it’s that simple .

The other 2 available plugins for enabling custom font on the WordPress Platform are just as good, however with the plugin called AnyFont which is available right AnyFontHERE , there seem to exist some user issues [ although I have tested the plugin myself and it worked perfectly for me ] , there are certain user comments on the Authors page which constitute some type of bug , however : as mentioned , I have not run into such user related issues which some of these users speak of on the Authors page.

If you are on the WordPress platform and prefer to use this plugin instead of the FontBurner plugin , I would highly recommend it due to the fact that with AnyFont you have absolute control over installing custom font throughout your entire blog ( body as well as headers ) . You can of course use AnyFonts default fonts or – you can download ANY font of your choosing ( which is of course FREE ) , upload it to the AnyFont plugin Dashboard , customize the size , colors , shadows ( oh yeah , it has shadow effects as well ! ) and implement it throughout your entire site and page load time is not affected in the least . It is now up to you whether you simply want custom font for your headers alone , or you would prefer to have more control over ALL of the text font on your page/ blog . The choice is yours .

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 Typekit FontsHERE . 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 Pointer 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



Amerika Sans JS Code

You will now have to ‘Copy’ the following line of code from inside of the javascript code|| >> America Sans << || paste this code into your external Editor [ or anywhere else for that matter ] where you can conduct the desired customizations , by going to your Color Chart Editor , you can use a color editor such as the Online Color Schemer RIGHT HERE , and choose your desired color (s) for your Custom Font Headers , and alter / change the below depicted colors which are denoted as : #000000; to whatever color ( s ) you will choose.

Amerika Sans PHP Code for Header Colors

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 ::





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 .

Now I know it was mentioned that you can install Custom Fonts without Writing Script – and this still applies , however : If you wish to ‘Alter’ the COLOR (S) of the headers from their original black ( #000000; ) font , you will have to get into the code and make that particular adjustment ( which is not a big deal , just follow the instructions explained here ) and you will have some really great Custom Font / Custom Colored headers for your page .

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 !

Get Our Feeds Delivered To Your Inbox

Like This Post

  0 Like

AUTHOR INFO

Mia

Admin at Fontype
A Typegeek hooked on code & design.

@

Couldn't fetch latest tweet.

Feedback 13 Comments

  1. Lisa Jones says:

    Very good incite here! Thank you for the advise. Do you have a mailing list I can sign up on?

  2. Luis Dowen says:

    Normally I don’t read posts on blogs, however I wish to say that this write-up compelled me to check you out and go through some of your other posts! Your writing style has amazed me. Thank you Mia, very great posts….each and every one of them :)

  3. Cindy M says:

    Hi Mia,
    Thanks so much for this!
    I have been looking for something like this, it seemed super easy but It didn’t work for me :(
    Can you help? I use blogger.
    here is my blog cinsarah.blogspot.com
    Thanks!

    • Mia says:

      Hey Cindi,
      Thanks for the feedback, now from what I was able to assess from viewing your site , it seems that you have already utilised custom fonts for the header titles if Im not mistaken ?
      However, in case you still need to implement custom font and you want to go the distance, you can go here and follow the tutorial which is very simple.

      I hope this helps you out and if you still have any issues , let me know and maybe I can help out :)

  4. Nancy Propes says:

    Thank you for this plugin. It looks useful but I think there are quite a bite of options in blogger and various of pluggins to download to adjust your fonts as much as you want. The bloggers sims to get their attention of the content and on to… less important things :) Well this is only my opinion.

    Thank you,
    Nancy

    • Mia says:

      Actually there are no Plugins for the Blogger platform Nancy , only widgets. The only way of implementing custom font for Blogger is via Cufon which is javascript unfortunately :)

      Cheers !


Leave a Reply