Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Font Size Toggle widget by haynes lab — https://hayneslab.dev/tools/widgets/font-size-toggle -->
<script>
/*!
* haynes lab — Font Size Toggle widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/font-size-toggle
*/
(function () {
'use strict';
var PREFIX = 'hlw-font-size-toggle';
var STYLE_ID = 'hlw-font-size-toggle-styles';
var STORAGE_KEY = 'hlw-font-size-toggle';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/font-size-toggle.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { display: inline-flex; align-items: center;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 14px; line-height: 1; color: #1f2937; }' +
'.' + PREFIX + '__pill { display: inline-flex; align-items: stretch; overflow: hidden;' +
' background: #ffffff; border: 1px solid #e5e7eb; border-radius: 999px;' +
' box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }' +
'.' + PREFIX + '__btn { appearance: none; border: 0; background: transparent; color: #374151;' +
' font: inherit; cursor: pointer; padding: 8px 14px; display: inline-flex; align-items: center;' +
' justify-content: center; }' +
'.' + PREFIX + '__btn + .' + PREFIX + '__btn { border-left: 1px solid #e5e7eb; }' +
'.' + PREFIX + '__btn:hover { background: #f9fafb; color: var(--hlw-accent); }' +
'.' + PREFIX + '__btn:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: -2px; }' +
'.' + PREFIX + '__btn:disabled { color: #d1d5db; cursor: default; background: transparent; }' +
'.' + PREFIX + '__btn--down { font-size: 12px; font-weight: 600; }' +
'.' + PREFIX + '__btn--reset { font-size: 14px; font-weight: 600; min-width: 52px; }' +
'.' + PREFIX + '__btn--up { font-size: 17px; font-weight: 600; }' +
'.' + PREFIX + '__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;' +
' overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }' +
'.' + PREFIX + '__credit { font-size: 11px; margin-left: 8px;' +
' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
'@media (max-width: 480px) { .' + PREFIX + '__credit span { display: none; }' +
' .' + PREFIX + '__credit { margin-left: 6px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function numAttr(script, name, fallback) {
var n = parseFloat(script.getAttribute(name));
return isNaN(n) ? fallback : n;
}
function build(script) {
var min = numAttr(script, 'data-hl-min', 90);
var max = numAttr(script, 'data-hl-max', 120);
var step = numAttr(script, 'data-hl-step', 10);
var accent = script.getAttribute('data-hl-accent') || '#f97316';
if (min >= max) { min = 90; max = 120; }
if (step <= 0 || step > max - min) step = 10;
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
var pill = el('div', PREFIX + '__pill');
pill.setAttribute('role', 'group');
pill.setAttribute('aria-label', 'Text size');
var down = el('button', PREFIX + '__btn ' + PREFIX + '__btn--down', 'A−');
down.type = 'button';
down.setAttribute('aria-label', 'Decrease text size');
var reset = el('button', PREFIX + '__btn ' + PREFIX + '__btn--reset', 'A');
reset.type = 'button';
reset.setAttribute('aria-label', 'Reset text size to default');
var up = el('button', PREFIX + '__btn ' + PREFIX + '__btn--up', 'A+');
up.type = 'button';
up.setAttribute('aria-label', 'Increase text size');
var status = el('span', PREFIX + '__status');
status.setAttribute('aria-live', 'polite');
pill.appendChild(down);
pill.appendChild(reset);
pill.appendChild(up);
root.appendChild(pill);
root.appendChild(status);
var current = 100;
function readStored() {
try {
var raw = window.localStorage.getItem(STORAGE_KEY);
var n = parseFloat(raw);
if (!isNaN(n) && n >= min && n <= max && n !== 100) return n;
} catch (e) { /* storage unavailable */ }
return 100;
}
function store(pct) {
try {
if (pct === 100) {
window.localStorage.removeItem(STORAGE_KEY);
} else {
window.localStorage.setItem(STORAGE_KEY, String(pct));
}
} catch (e) { /* storage unavailable */ }
}
function apply(pct, persist) {
current = pct;
if (pct === 100) {
document.documentElement.style.fontSize = '';
} else {
document.documentElement.style.fontSize = pct + '%';
}
if (persist) store(pct);
down.disabled = current <= min;
up.disabled = current >= max;
var label = pct === 100 ? 'Default text size' : 'Text size ' + pct + '%';
reset.title = label + ' — click to reset';
status.textContent = 'Text size set to ' + (pct === 100 ? 'default' : pct + '%');
}
down.addEventListener('click', function () {
apply(Math.max(min, current - step), true);
});
up.addEventListener('click', function () {
apply(Math.min(max, current + step), true);
});
reset.addEventListener('click', function () {
apply(100, true);
});
apply(readStored(), false);
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
var creditText = el('span', null, 'Powered by haynes lab');
credit.appendChild(creditText);
credit.href = 'https://hayneslab.dev/tools/widgets/font-size-toggle';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab font-size-toggle] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>