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.
thanks!
ReplyDeleteThis is amazing!!! Thank you so much for this!
ReplyDeleteHmm... so the jquery one works in safari, firefox, explorer, but not chrome. The logo still shows at the bottom with that one. With the javascript one it works in firefox and safari but not chrome or explorer. I'm not good enough with code to know why though.
ReplyDeleteit could be a separate script loading on the page which waits until the page has finished loading and then adds its own div's in, in the event of this the script above may think that script is the fonts.com script, what other third party javascript do you have running
ReplyDeleteWhy not just use CSS? This works
ReplyDelete#mti_wfs_colophon img {
display: none;
}
Thanks mate... that works perfectly and it is a very easy solution!
Deletecan you help me? I have a squarespace account and am trying to get rid of the block. Where do I put this code? Do i put in code injection? It doesn't work in the header or in the footer. Thanks!
DeleteEven simpler, remove the whole block generated by their code.
ReplyDelete#mti_wfs_colophon{display:none; }
Wicked thanks dude ;)
ReplyDeleteAWESOME! Thanks. I left your info on the code dude!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteOf course, the *easiest* way to get rid of the banner, is to upgrade to a paid account. It doesn’t violate our EULA (like this method does) and includes more pageviews, advanced implementation methods and access to approximately 15,000 more typefaces :-)
ReplyDeleteThis comment has been removed by the author.
DeleteI would switch to paid account, but you've got to redo your pricing/subscription model! I love that Fonts.com offers the service, but the business folks have got to go back to the drawing board. Convincing my clients that they have to spend $10 a month just to use a font on their site, when hosting is usually $15 for the entire site, never happens. We find an alternative font on Typekit (much friendlier pricing) or Google. When I'm doing the designing, I avoid Fonts.com fonts altogether.
DeleteMy only problem with Fonts.com accounts is that, I don't always need 15k fonts, sometimes I just want 1 license for web usage for 1 website and there is no option for that.
ReplyDelete