Using jQuery to Test New Website Fonts

By Sam Deering

This is a neat little script I found which lets you preview live new font’s for your website using jQuery Font Dragr. Could be useful if your showing a client what various fonts look like, or for just everyday font test for website. Enjoy.



  1. Copy and paste into a new bookmark (right click paste on the bookmark toolbar)
  2. Visit the website you want to font preview
  3. Click the bookmark
  4. Populate the font list by dragging fonts into the bar
  5. Instant preview on with jQuery selector to target specific elements

The Code

javascript: (function (d) {
    var s = d.createElement('script'),
        h = d.head || d.getElementsByTagName('head')[0];
    s.src = '';

View the code:

Obfuscated Version

javascript:var _0x5a5b=["x73x63x72x69x70x74","x63x72x65x61x74x65x45x6Cx65x6Dx65x6Ex74","x68x65x61x64","x67x65x74x45x6Cx65x6Dx65x6Ex74x73x42x79x54x61x67x4Ex61x6Dx65","x73x72x63","x68x74x74x70x3Ax2Fx2Fx66x6Fx6Ex74x64x72x61x67x72x2Ex63x6Fx6Dx2Fx62x6Fx6Fx6Bx6Dx61x72x6Bx6Cx65x74x2Fx66x64x2Dx73x63x72x69x70x74x2Ex6Ax73","x61x70x70x65x6Ex64x43x68x69x6Cx64"];(function (_0xf8bcx1){var _0xf8bcx2=_0xf8bcx1[_0x5a5b[1]](_0x5a5b[0]),_0xf8bcx3=_0xf8bcx1[_0x5a5b[2]]||_0xf8bcx1[_0x5a5b[3]](_0x5a5b[2])[0];_0xf8bcx2[_0x5a5b[4]]=_0x5a5b[5];_0xf8bcx3[_0x5a5b[6]](_0xf8bcx2);} )(document);

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.