Accessibility-focused font size controls for Flarum 2.0. Users can adjust reading text size and interface size via a header button, with preferences saved in cookies. Admins set sitewide defaults from the extension settings.
composer require linkrobins/font-sizer
Then enable it in your forum's admin panel under Extensions.
A Flarum 2.0 extension that gives users accessibility-focused font size controls directly in the forum header, no CSS editing required. Admins set sitewide defaults; users override them with their own preferences, saved in cookies.
fa-text-height icon in the forum header opens a size dialog for all users, including guestsThe reading text size runs from 100% (Flarum default) to 150% in 5% increments. The interface size toggle offers Default or Large (115%). Both values are stored as cookies (lr_text_scale and lr_ui_size) on the user's browser. If no cookie exists, the user sees whatever the admin has configured as the sitewide default.
Admin defaults are saved to Flarum's settings table under linkrobins-font-sizer.scale and linkrobins-font-sizer.ui, and served to the forum frontend in the page payload.
When a user picks a non-default size, the extension sets two CSS custom properties (--lr-text-scale and --lr-ui-scale) on the <html> element and toggles a gate class (lr-text-scaling / lr-ui-scaling). At the default size both are removed, so the theme renders untouched. The shipped rules, gated behind those classes, multiply each target's base size by the variable:
html.lr-text-scaling .Post-body { font-size: calc(var(--lr-text-base, 14px) * var(--lr-text-scale, 1)); }
The pixel bases the scale multiplies are themselves configurable, because a theme's font may want different starting sizes than Flarum's stock 14px (many serif fonts render optically smaller at the same px size). Three base variables cover the reading-text targets:
| Variable | Default | Applies to |
|---|---|---|
--lr-text-base |
14px |
Post bodies, mobile discussion-list titles |
--lr-text-small |
12px |
Excerpts |
--lr-text-title |
16px |
Heroes and desktop list titles (the desktop hero derives from it at the historical 16:22 ratio) |
There are two ways to set them:
lr-text-bases, activates the rules), and user scaling multiplies on top.:root { --lr-text-base: 16px; }. This only takes effect while a user is scaling, i.e. it tells the extension what base your theme's own CSS already establishes, so scaling starts from the right size. The admin settings, when changed away from the defaults, take precedence over this route.Out of the box the extension scales core's reading text (post bodies, titles, excerpts) and interface chrome. Because text set in pixels can only be scaled by the element that owns it, content from other extensions opts in explicitly. There are two ways, and both are live: they update as the user changes their size, and they are inert at the default size.
1. Add a class to your readable-content root or chrome element:
// readable content (article bodies, chat messages, custom posts)
m('div', { className: 'MyExtension-body FontSizer-text' }, ...)
// interface chrome (custom nav items, toolbars)
m('button', { className: 'Button FontSizer-ui' }, ...)
2. Or reference the variables directly in your own LESS/CSS, with a fallback of 1 so nothing changes when the extension is absent or at its default:
.MyExtension-body { font-size: calc(1em * var(--lr-text-scale, 1)); }
Use --lr-text-scale for reading content and --lr-ui-scale for interface elements.
flarum/core