Implement simple font zoomer in JavaScript & HTML
A lot of websites on internet provide users with an option to increase the font size of the page for better reading experience. Although nowadays almost all the web browsers supports zoom in/out functionality using mouse wheel scroll or other shortcut keys, it is sometimes a good idea to give user a way to increase/decrease the font size of web page. Let us implement a simple zoomer code in JavaScript that will increase/decrease the font size of the web page at client side without reloading the page from server. A small JavaScript snippet will be used to change the font size of the web page at client side.

JavaScript code

Let us check the following JavaScript code. 
var fontSize = 1;
function zoomIn() {
 fontSize += 0.1;
 document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
 fontSize -= 0.1;
 document.body.style.fontSize = fontSize + "em";
}

Code language: JavaScript (javascript)
In the above JavaScript code, a global variable fontSize is defined with value 1. This variable’s value will be changed whenever user tries to increase or decrease the font size. Then we have two functions zoomIn() and zoomOut() to perform zoom in and zoom out respectively. The font size of the web page is changed by changing the attribute fontSize in document.body.style.

Calling JavaScript from HTML

You can place simple icons to zoom in and zoom out the text and call the zoomIn() and zoomOut() methods on click event. Or can place buttons to zoom in/out. 
<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>

Code language: HTML, XML (xml)

Online Demo

Click on below buttons and see the text getting zoomed..!!

View Comments

  • Hi Hasnor,
    Following is the integrated code. Copy the code in FontZoomer.html and test it in your favorite browser.

    <html>
<head>
  <script language="javascript">
  var fontSize = 1;
 function zoomIn() {
  fontSize += 0.1;
  document.body.style.fontSize = fontSize + "em";
 }
 function zoomOut() {
  fontSize -= 0.1;
  document.body.style.fontSize = fontSize + "em";
 }
 </script>
</head>
<body>

<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>

A quick brown fox jumps over lazy dog.

</body>
</html>

  • Hi Hasor,
    I have changed the code in my previous comment. take a look.
    Paste the javascript code in HEAD and buttons in BODY.

  • Thanks Viral Patel. Your code look very simple, I applied it on my test page, it worked very well. And I have a question related to that. I want to use cookie to carry whatever font size the users using to the next page they go (of course on the same web site). I found this code and put right before the tag but it doesn't work. I'm not a programmer, can you please address me on this? Thanks.

    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }

  • good job done by you.thnx for that.but when I am using master page that time it doesn’t work. Can you please guide me on this? Thanks.

  • Love the script! Easy to work with.
    Quick question: how do I specify that I only want what's in a certain div or iframe to zoom?
    For example:
    [code language="html"] &lt;div id=&quot;contentBody&quot;&gt; [/code]
    or
    [code language="html"] &lt;.iframe id =&quot;topic&quot;&gt; [/code]

Leave a Comment
Share
Published by
Viral Patel
Tags: font zoom html JavaScript zoomer
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago