Instant Font Resizer using Jquery

Nowadays, In all website and blogs has the font re-sizer. So many developer/designers struggling to get this. Writing so many CSS and Javascript. Here i’m going to give few simpler and instant font re-sizer. For further info: jFontsize.

Step 1. Download the Js file

Upload the js file to the server. Add the script before </head> in your index.html

<script src=”; type=”text/javascript”/>

Step 2. Customize CSS

Add below class in your stylesheet

.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;

.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;

.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;

Step 3.  Assigning Font resize Function

<a id=”jfontsize-minus” class=”jfontsize-button” href=”#”>A-</a>
<a id=”jfontsize-default” class=”jfontsize-button” href=”#”>A</a>
<a id=”jfontsize-plus” class=”jfontsize-button” href=”#”>A+</a>
<p class=”PUT-THE-CLASS-NAME”>
Place your content here
<script type=”text/javascript” language=”javascript”>
                            btnMinusClasseId: ‘#jfontsize-minus’,
                            btnDefaultClasseId: ‘#jfontsize-default’,
                            btnPlusClasseId: ‘#jfontsize-plus’

Just replace the “PUT-THE-CLASS-NAME” as your class where you need the font resizer to work on.

For the live demo and you can download full source code


One thought on “Instant Font Resizer using Jquery

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s