Sometimes readers prefer larger text, and other times they just want the default size. Adding a font size toggle button solves that problem easily.
This quick tutorial shows you how to add a font size toggle feature to any site, so visitors can resize text without stress.
Step 1: Add the HTML
Copy and paste this code where you want the button to appear - preferably in your blog’s layout or footer.
<!-- Font Resize Widget html --><div id="font-size-toggle" aria-hidden="true"><div class="font-size-toggle__label-wrap"><a href="javascript:void(0)" class="font-size-toggle__label">Change Font Size</a></div><div class="font-size-toggle__control-panel"><a href="javascript:void(0)" class="font-size-toggle__increase"><i class="fas fa-arrow-up"></i></a><div class="font-size-toggle__scale"><span class="font-size-toggle__value">100</span>% </div><a href="javascript:void(0)" class="font-size-toggle__decrease"><i class="fas fa-arrow-down"></i></a></div></div>Step 2: Add the CSS
Style the toggle button to make it look nice and responsive. Add this inside your <style> tag or external stylesheet.
<!-- font resize widget css -->#font-size-toggle{position:fixed;right:0;top:30%;display:flex;background:#34ebb1;color:#000;transform:translate(calc(20px + 2.7em));transition:0.3s}#font-size-toggle.expanded{transform:none}.font-size-toggle__label{display:flex;justify-content:center;align-items:center;writing-mode:vertical-lr;transform:rotate(180deg);text-decoration:none;color:#000;font-weight:700;opacity:.6;transition:0.2s}.font-size-toggle__label:hover,.font-size-toggle__label:focus{opacity:1}.font-size-toggle__control-panel{display:flex;flex-direction:column;align-items:center;padding:10px}.font-size-toggle__increase,.font-size-toggle__decrease{background:none;border:2px solid #000;color:#000;height:1.6em;width:1.6em;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer}.font-size-toggle__increase:hover,.font-size-toggle__decrease:hover{background:#000;color:#fff}.font-size-toggle__scale{padding:10px 0}Step 3: Add the JavaScript
Make the button functional by adding this script just before the closing </body> tag.
<!-- font resize widget js --> <script>$(function(){let toggle=$('#font-size-toggle'),trigger=toggle.find('.font-size-toggle__label'),incBtn=toggle.find('.font-size-toggle__increase'),decBtn=toggle.find('.font-size-toggle__decrease'),indicator=toggle.find('.font-size-toggle__value'),initialSizes={},fontSizeSetting=parseFloat(localStorage.getItem('fontSizeSetting'));let selectorsToScale=['p','button'];for(const selector of selectorsToScale){let fontSize=$(selector).css('font-size');initialSizes[selector]=parseFloat(fontSize)}
if(fontSizeSetting){setFontSizes(fontSizeSetting)}else{fontSizeSetting=100.0}
trigger.click(function(){toggle.toggleClass('expanded')});incBtn.click(function(){changeFontSizes('up')});decBtn.click(function(){changeFontSizes('down')});function changeFontSizes(direction){fontSizeSetting+=direction==='up'?10:-10;localStorage.setItem('fontSizeSetting',fontSizeSetting);setFontSizes(fontSizeSetting)}
function setFontSizes(setting){const scaleFactor=setting/100.0;indicator.text(parseInt(setting));for(const selector of selectorsToScale){let newSize=initialSizes[selector]*scaleFactor;$(selector).css('font-size',newSize+'px')}}});</script>Simple Paste For Blogger Sites
Blogger users can add the font size toggle widget to their Blogger site using an HTML/JavaScript gadget:
Step 1: Open Blogger Layout
<> Go to Blogger Dashboard.
<> Click on Layout from the left menu.
<> Find the section where you want the widget to appear (e.g., Sidebar).
<> Click Add a Gadget.
<> Select HTML/JavaScript.
Step 2: Add the Code
Copy and paste this code into the content box of the HTML/JavaScript gadget:
<!-- Font Size Toggle Widget --><div id="font-size-toggle" aria-hidden="true"><div class="font-size-toggle__label-wrap"><a href="javascript:void(0)" class="font-size-toggle__label">Change Font Size</a></div><div class="font-size-toggle__control-panel"><a href="javascript:void(0)" class="font-size-toggle__increase"><i class="fas fa-arrow-up"></i></a><div class="font-size-toggle__scale"><span class="font-size-toggle__value">100</span>%</div><a href="javascript:void(0)" class="font-size-toggle__decrease"><i class="fas fa-arrow-down"></i></a></div></div><!-- Font Size Toggle CSS --><style>#font-size-toggle{position:fixed;right:0;top:30%;display:flex;background:#34ebb1;color:#000;transform:translate(calc(20px+2.7em));transition:0.3s}
#font-size-toggle.expanded{transform:none}.font-size-toggle__label{display:flex;justify-content:center;align-items:center;writing-mode:vertical-lr;transform:rotate(180deg);text-decoration:none;color:#000;font-weight:700;opacity:0.6;transition:0.2s}.font-size-toggle__label:hover,.font-size-toggle__label:focus{opacity:1}.font-size-toggle__control-panel{display:flex;flex-direction:column;align-items:center;padding:10px}.font-size-toggle__increase,.font-size-toggle__decrease{background:none;border:2px solid #000;color:#000;height:1.6em;width:1.6em;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer}.font-size-toggle__increase:hover,.font-size-toggle__decrease:hover{background:#000;color:#fff}.font-size-toggle__scale{padding:10px 0}</style><!-- Font Size Toggle JavaScript --><script>$(function(){let toggle=$('#font-size-toggle'),trigger=toggle.find('.font-size-toggle__label'),incBtn=toggle.find('.font-size-toggle__increase'),decBtn=toggle.find('.font-size-toggle__decrease'),indicator=toggle.find('.font-size-toggle__value'),initialSizes={},fontSizeSetting=parseFloat(localStorage.getItem('fontSizeSetting'));let selectorsToScale=['p','button'];for(const selector of selectorsToScale){let fontSize=$(selector).css('font-size');initialSizes[selector]=parseFloat(fontSize)}
if(fontSizeSetting){setFontSizes(fontSizeSetting)}else{fontSizeSetting=100.0}
trigger.click(function(){toggle.toggleClass('expanded')});incBtn.click(function(){changeFontSizes('up')});decBtn.click(function(){changeFontSizes('down')});function changeFontSizes(direction){fontSizeSetting+=direction==='up'?10:-10;localStorage.setItem('fontSizeSetting',fontSizeSetting);setFontSizes(fontSizeSetting)}
function setFontSizes(setting){const scaleFactor=setting/100.0;indicator.text(parseInt(setting));for(const selector of selectorsToScale){let newSize=initialSizes[selector]*scaleFactor;$(selector).css('font-size',newSize+'px')}}});</script>Step 3: Save and Test
<> Click Save in the gadget editor.
<> Preview your blog to test the widget.
<> Adjust font sizes using the increase and decrease buttons.
Final Notes:
jQuery Dependency:
Make sure jQuery is included in your site. Add this line inside the <head> tag if it’s missing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
The widget adjusts the font size for paragraphs (<p>) and buttons (<button>). You can add more elements by editing this line:
let selectorsToScale = ['p', 'button'];
This widget is mobile-friendly - the CSS automatically adjusts the widget layout for mobile screens. You are also free to change the widget design.
You can see this widget in action on this site.
Get more widgets like this using the widget label.
