Dyslexia Font Switcher

WHAT IT DOES

This script applies dyslexia-friendly fonts to any webpage, making text easier to read for people with dyslexia and other reading difficulties. When enabled, the script replaces the page's font with a specialized font designed to reduce letter confusion and improve readability. You can choose from multiple dyslexia-friendly fonts including OpenDyslexic, Dyslexie, Lexend, Atkinson Hyperlegible, and even Comic Sans. The script also lets you adjust font size and line spacing for optimal reading comfort. You can apply the font to all text, only paragraphs, only headings, or only body text. The font preference is saved locally and persists across browsing sessions. A toggle lets you switch between the dyslexia font and the original font instantly.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with text—articles, documents, emails, forums, social media, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable font switcher" toggle enables or disables the script.

- Select a font from the dropdown: OpenDyslexic, Dyslexie, Comic Sans, Lexend, or Atkinson Hyperlegible.

- Adjust the "Font size" slider to increase or decrease text size (50% to 200%).

- Adjust the "Line spacing" slider to control the space between lines (1.0 to 2.5).

- Choose where to apply the font: "All text," "Paragraphs only," "Headings only," or "Body text."

- Click "Toggle font" to switch between the dyslexia font and the original font.

- Click "Refresh styles" to re-apply the font if it doesn't appear.

The script works automatically—just enable it and the font will be applied to all pages.

TECHNICAL SECTION — REAL MECHANISM

The script injects a style element into the page head containing CSS rules that override the font-family, font-size, and line-height of text elements. The font-family is set using CSS !important to override site styles. The font is loaded from CDN sources (OpenDyslexic, Dyslexie, Lexend, Atkinson Hyperlegible) via link elements or CSS imports. The applyTo setting controls which CSS selector is used: "*" for all elements, "p, li, blockquote" for paragraphs, "h1-h6" for headings, or "body" for body text. The font size is applied as a percentage, scaling the base font size up or down. The line height is applied as a multiplier (e.g., 1.5). The style element is recreated whenever settings change. When the toggle button is clicked, the style element is removed or re-added, effectively toggling the font on and off. A MutationObserver watches for DOM changes and re-applies the font when new content is loaded.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The script loads fonts from CDN sources—if you are offline or the CDN is unavailable, the fonts may not load. In that case, the fallback sans-serif font will be used. The script uses CSS !important to override site styles, which may cause issues on sites with complex styling. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.