Blog · Browser Setup

Dyslexia-friendly Firefox setup: fonts, Reader View, and extensions

Firefox gives you more low-level control over how text looks than almost any other mainstream browser - but most of its dyslexia-relevant settings are buried two or three menus deep, or require touching about:config. This guide covers every layer, in order of effort: Reader View first, then default font preferences, then the configuration flags that make site fonts optional, then the add-ons that fill remaining gaps.

Quick orientation: Firefox's built-in Reader View is the fastest first step. Default font settings cover pages outside Reader View. The about:config flag browser.display.use_document_fonts is the nuclear option - it forces every site to use your chosen font. Extensions fill whatever the browser-level settings can't reach. Work through these layers in order and stop when you're comfortable.

Layer 1: Reader View

Reader View is Firefox's built-in reading mode. It strips a page down to its article text, removes sidebars, ads, and navigation, and presents the content in a clean single-column layout where you control the font, size, line spacing, and background colour. It is the fastest way to make a cluttered article readable and requires no extensions.

To open it, look for the book icon that appears in the address bar when Firefox detects an article. Click it, or press F9 on desktop. Not all pages trigger it - it works on article-style content (news pieces, blog posts, Wikipedia) but not dashboards, interactive apps, or pages behind a login that don't follow a standard article structure.

Reader View font settings

Once in Reader View, click the Aa button in the toolbar at the top of the page. This opens a panel with five controls:

  • Font type - four options in current Firefox versions: Sans-serif, Serif, Monospace, and (as of Firefox 126) a Dyslexia-friendly option that applies OpenDyslexic. If your Firefox version doesn't show the fourth option, update it or switch the font selector to Sans-serif and apply OpenDyslexic via an add-on instead.
  • Font size - a slider from small to large. For most adult dyslexic readers, 18-20px is a comfortable starting point. See the research summary in our piece on the best font size for dyslexic adults for the numbers behind that range.
  • Line spacing - a slider from narrow to wide. Set this wider than the default. Research on line spacing and letter spacing for dyslexia consistently points to 1.5x as a minimum and 1.8x as a comfortable long-reading target.
  • Content width - how wide the text column is. Narrower is almost always better for dyslexic readers - wide columns mean longer return sweeps and more chances to skip a line. Keep this at Medium or Narrow.
  • Colour scheme - Light, Dark, Sepia, and (in recent versions) a custom colour option. Sepia gives you a warm off-white background, which many readers with visual stress or sensitivity to bright-white screens prefer. See our piece on background colours for dyslexia for the evidence behind cream and buff tones.

Reader View settings persist across sessions. Set them once and they apply to every article you open in Reader View, on any site.

The limitation of Reader View

Reader View only works on pages it can parse as articles. Any site that requires login, any dynamic app, any page with unusual markup, and most documentation sites will not trigger it. For everything outside Reader View, you need the settings below.

Layer 2: Default font preferences

Firefox lets you set a global default font that it will use when a site does not specify one. This affects a surprisingly large proportion of plain-text pages, documentation, and older sites. Here is how to configure it:

  1. Open Settings (hamburger menu at the top right, or press Alt then E on Windows/Linux).
  2. Go to the General section and scroll down to Fonts.
  3. Click Advanced... to open the full font dialog.
  4. Set Default font, Proportional, Serif, and Sans-serif to your preferred dyslexia-friendly font. If you have OpenDyslexic, Lexend, or Atkinson Hyperlegible installed on your system, they will appear in these dropdowns. If not, see the font installation note below.
  5. Set a comfortable minimum font size - 16px is a reasonable floor, 18px if you find yourself regularly zooming in on sites.

To install a font on your system so it appears in Firefox's dropdown: on Windows, download the font files and right-click to install. On macOS, open Font Book and drag the files in. On Linux, copy the font files to ~/.local/share/fonts/ and run fc-cache -fv. Fonts from Google Fonts are free to download: Lexend and Atkinson Hyperlegible are both available there.

Text in Atkinson Hyperlegible (installed as a system font) Atkinson Hyperlegible was designed for readers with low vision. The letterforms exaggerate the features that distinguish similar characters - the curve on the 'a', the descender on the 'q' - making b/d and p/q less likely to be confused at a glance.

Layer 3: Forcing Firefox to use your font on every site

The default font setting only applies when a site does not specify its own font. Most sites do specify their fonts, which means your chosen default is ignored on the majority of the web. To override this, you need to tell Firefox to ignore site fonts entirely.

There are two ways to do this.

Option A: Uncheck "Allow pages to choose their own fonts"

In the same Advanced fonts dialog from Layer 2, you will see a checkbox at the bottom: Allow pages to choose their own fonts, instead of your selections above. Uncheck it.

When this checkbox is off, Firefox renders all text in your default font. No site font overrides apply. This is the cleanest, most reliable approach. The trade-off is that some sites rely on font icons (icon fonts, SVG-via-font, etc.) that will break visually - you will see blank squares where icons should be. For most content-reading use cases this does not matter, but if you use web apps like Google Docs, Figma, or Notion, you may want to leave the checkbox on and use an extension instead.

Option B: about:config flag

The same behaviour can be toggled via about:config. Type about:config in the address bar, accept the warning, and search for browser.display.use_document_fonts. Set it to 0 to force your own fonts everywhere, or 1 (the default) to allow site fonts. This is exactly the same setting as the checkbox, exposed for users who prefer to configure via about:config or who want to toggle it with a userscript.

Layer 4: Extensions from Mozilla's Add-ons store

Firefox's extension store (addons.mozilla.org, sometimes called AMO) has a smaller catalogue than the Chrome Web Store, but the dyslexia-relevant options cover most use cases.

OpenDyslexic for Firefox

There is an official OpenDyslexic add-on on AMO. It injects the OpenDyslexic typeface into every page you visit, overriding the site's own font. The approach is similar to the OpenDyslexic Chrome extension. You get a toggle in the toolbar to enable or disable it per-session, and the extension respects Reader View - if you are in Reader View and have selected the dyslexia-friendly font option, the add-on does not double-apply.

OpenDyslexic was designed specifically for dyslexic readers: the bottoms of letters are weighted to indicate orientation, reducing b/d and p/q reversals, and letter spacing is set wider by default than in mainstream typefaces. It is not the most visually refined font, but for readers whose difficulty is primarily at the letter-identification level, it is often the clearest option.

Font changer and style injectors

For readers who want Lexend, Atkinson Hyperlegible, or another face rather than OpenDyslexic, a CSS-injection extension is the right tool. Search AMO for "font changer" or "stylus" - the Stylus extension (a maintained fork of the older Stylish extension) lets you write per-site CSS rules and apply them globally. A global rule that sets font-family: 'Lexend', sans-serif !important; line-height: 1.8 !important; in the body selector will override nearly every site's font. It requires a small amount of CSS knowledge, but only needs to be written once.

Dark mode and contrast extensions

Dark Reader is available on Firefox and is one of the most popular extensions on AMO. It applies a site-wide dark theme that can significantly reduce glare for readers with visual stress or photosensitivity. Importantly, it also lets you set a custom font family in its settings panel, so you can combine a dark background with your chosen typeface in one extension. See our notes on dyslexia-friendly dark mode for guidance on whether dark contrast helps your specific situation.

Reading ruler extensions

AMO has several reading ruler and line-focus add-ons that highlight one line or a narrow band of text at a time. These are useful for readers who lose their place on long paragraphs rather than at the letter or word level. The quality varies - look for one with an adjustable height and colour, and test it on a long-form article before committing. A reading ruler that spans only one line at a time is more effective than a wide highlight band, because it limits the visual field to exactly what you are reading.

How Firefox compares to other browsers for dyslexic readers

 FirefoxChromeEdge
Built-in reader modeYes - Reader View, well-featuredPartial - stripped-down reading mode on mobile; no full reader mode on desktopYes - Immersive Reader, the most full-featured of the three
Reader mode dyslexia fontYes - OpenDyslexic option in Reader View (Firefox 126+)NoYes - via Immersive Reader font settings
Force custom fontsYes - via preferences or about:configYes - via Settings > Appearance > Customise fonts, plus "Page zoom" for sizeYes - via Settings > Appearance > Fonts
Extension ecosystem sizeSmaller than Chrome, most major tools have Firefox versionsLargest - most dyslexia tools launch here firstCompatible with Chrome Web Store extensions
Line focus / read aloudVia extension onlyVia extension onlyBuilt in to Immersive Reader
PrivacyStrongest default privacy stance of the threeGoogle-integrated by defaultMicrosoft-integrated by default

If you already use Firefox for privacy reasons and want to make it dyslexia-friendly, the steps in this guide get you most of the way there without switching browsers. If you are undecided on which browser to use, Edge's built-in Immersive Reader is the most complete out-of-the-box experience - we covered it in detail in the guide to dyslexia-friendly Microsoft Edge setup. Chrome has a larger extension ecosystem, which is especially relevant if you rely on third-party tools to apply fonts site-wide.

A practical Firefox reading stack

Here is the combination most dyslexic Firefox users settle on after experimenting with the options above. Start here and adjust based on what does not feel right for your specific reading difficulty.

  • Reader View set to Dyslexia-friendly font (or Sans-serif if your Firefox is older), Medium width, Wide line spacing, Sepia colour scheme. Use this for any article-style content.
  • OpenDyslexic add-on from AMO enabled globally - this covers everything Reader View cannot parse. Toggle it off for sites that render poorly with it.
  • Default font set to Atkinson Hyperlegible in Firefox Preferences (after installing it on your system) - this acts as a fallback when the extension is toggled off or when a site partially overrides the extension's CSS.
  • Minimum font size set to 16px in the Advanced fonts dialog - no site can render text smaller than this, which catches the small-print offenders.
  • Dark Reader optional - enable if you find white backgrounds harsh, especially in the evening or in fluorescent-lit environments.

This stack does not require touching about:config or writing any CSS. If after trying it you find that certain sites still render in difficult fonts that the extension doesn't fully override, add the browser.display.use_document_fonts = 0 flag from Layer 3 - it is the strongest override available and will bring virtually every site into line with your chosen font.

What about userContent.css?

Power users sometimes configure Firefox's userContent.css file to apply global CSS rules that persist even when extensions are disabled. It lives in your Firefox profile folder (accessible via about:support > Profile Folder > Open Folder), in a subfolder called chrome/. A simple rule like:

userContent.css @-moz-document url-prefix() {
  * { font-family: 'Atkinson Hyperlegible', sans-serif !important; line-height: 1.8 !important; }
}

will apply Atkinson Hyperlegible and 1.8x line spacing to every page, including Reader View override targets. You also need to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config for Firefox to read the file. This approach is more durable than extensions - it survives extension updates and works even in Firefox's stripped-down safe mode - but it requires a few manual steps to set up and breaks icon fonts in the same way as Layer 3's checkbox. For readers comfortable with a text editor and file navigation, it is the most reliable long-term option.

If you want the same setup in Chrome

If you share a computer with others who use Chrome, or you find a particular extension or site works better in Chrome, you can replicate most of this setup there too. The LexiFont Chrome extension applies dyslexia-friendly fonts site-wide from a toolbar button, with per-site profiles so you can have different fonts for different pages. LexiFont Pro adds Lexend, Atkinson Hyperlegible, and Comic Neue alongside OpenDyslexic, for readers who find that OpenDyslexic is too visually distinctive but still want a purpose-designed reading typeface. See the comparison in our guide to changing fonts on any website in Chrome for how the extension approach compares to the browser-level approach described in this guide.

LexiFont is Chrome-only, so it is not an option in Firefox. The OpenDyslexic AMO add-on and the font override settings described above are the closest equivalents for Firefox users.

The settings that matter most

If you have ten minutes and want the most improvement for the least effort, do two things: open Reader View (F9) on the next long article you read and configure the font and spacing in the Aa panel, and install the OpenDyslexic add-on from AMO for everything else. Those two steps cover the vast majority of reading you do in a browser. The remaining layers - font preferences, about:config flags, and userContent.css - are for readers who have tried the basics and still find specific sites difficult.

The underlying principle is the same as in any browser setup for dyslexia: start with the highest-level control (reader mode), move to browser preferences (default fonts), then to extensions (injected CSS), and only reach for low-level configuration (about:config, userContent.css) when the higher layers don't cover a use case. Each layer adds a little more complexity and a little more coverage. Most readers need the first two; a minority need all four.

For the typeface research behind these recommendations - which fonts have evidence behind them, how letter spacing interacts with font choice, and what the research says about OpenDyslexic versus more mainstream alternatives - see our overview of the best fonts for dyslexia in 2026.

Further reading