Thursday 26 May 2011

How to remove the fonts.com footer banner

If you use webfonts.fonts.com for their custom web fonts API, and like me, you don't like their default footer banner.
You've probably wanted to remove it and replace it with your own custom, much slicker banner which works nicely with your website.
I recently had this problem and decided to do something about it.

How they do it
The javascript file you include in the head of your html document loads their custom css and font, it then waits for 6 seconds to load the banner, this ensures all your other scripts have loaded, leaving nothing left but their banner to be placed neatly at the bottom of the page looking hideous.

I am going to give two examples here to removing this banner, the first will be using the jQuery library.

Using the jQuery library
Below is the complete code, it would be nice if you could leave my simple credits in there, Basically what happens is we count how many div tags have been loaded into the page and then we keep checking for another div to be added at the bottom of the page, once this happens we change the css attribute of display to none, which hides the banner.

/* http://dannyscodesnippets.blogspot.com 2011 removing webfonts.fonts.com banner */

/* when the document is ready start */
$(document).ready(function(){
   /* set variables */
 var count,newcount;
   /* count total divs loaded on the page */
  count = $('div').length;
 function checkwebFontDiv() {
    /* count total divs loaded on the page */
  newcount = $('div').length;
    /* if the total divs has increased by 1 then continue */
  if(newcount == count+1){
     /* hide the last div (the fonts.com banner div) */
   $('div:last').css("display","none");
    /* otherwise check again */
  } else {
   setTimeout(checkwebFontDiv,5); 
  }
 }
   /* start checking for the new div */
 checkwebFontDiv();
});

This is an example of how to implement this into your webpage.
First of all you need to download the jQuery library from here jquery.com (latest version).
Secondly you need to make sure you place this inside your head tags
<html>
<head>
<title>My test page hiding fonts.com banner</title>
<script src="javascript/jquery.1.5.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
/* http://dannyscodesnippets.blogspot.com 2011 removing webfonts.fonts.com banner */

/* when the document is ready start */
$(document).ready(function(){
   /* set variables */
 var count,newcount;
   /* count total divs loaded on the page */
  count = $('div').length;
 function checkwebFontDiv() {
    /* count total divs loaded on the page */
  newcount = $('div').length;
    /* if the total divs has increased by 1 then continue */
  if(newcount == count+1){
     /* hide the last div (the fonts.com banner div) */
   $('div:last').css("display","none");
    /* otherwise check again */
  } else {
   setTimeout(checkwebFontDiv,5); 
  }
 }
   /* start checking for the new div */
 checkwebFontDiv();
});
</script>
<head>

and that's it.

 
Using javascript
Below is the complete code, it would be nice if you could leave my simple credits in there, Basically what happens is we count how many div tags have been loaded into the page and then we keep checking for another div to be added at the bottom of the page, once this happens we change the css attribute of display to none, which hides the banner. The difference between this and the example above is that you don't need the jQuery library loaded, you also need to place this at the bottom of your webpage, just before the closing body tag.

<script>
/* http://dannyscodesnippets.blogspot.com 2011 removing webfonts.fonts.com banner */

 var count,newcount,xDivs;
 xDivs =  document.getElementsByTagName('div');
   // count total divs loaded on the page
 count = xDivs.length;
 function checkwebFontDiv() {
    // count total divs loaded on the page
  newcount = xDivs.length;
    // if the total divs has increased by 1 then continue
  if(newcount == count+1){
     // hide the last div (the fonts.com banner div)
   xDivs[count].style.display='none';
    // otherwise check again
  } else {
   setTimeout(checkwebFontDiv,5); 
  }
 }
   // start checking for the new div
 checkwebFontDiv();

</script>
</body>
</html>

That's it!
Any questions please comment.