Customize Chrome Browser for Dyslexia

In The Dyslexic Experience by Halimah VeonLeave a Comment

Chrome has some great extensions for customization. Reader View allows you to read an article without any of the extra fluff, like flashing ads that make concentrating difficult. Force Custom Fonts will make the entire page all one chosen font, including all headers. Alternatively, if you just want to make the main text change, (and it doesn’t work on all sites)

Requirements: 2 Dyslexia Friendly fonts already installed on your computer. Instructions for a PC. Instructions for a Mac.

This image has an empty alt attribute; its file name is image.png

Go to Chrome >> Preferences

This image has an empty alt attribute; its file name is image-2.png

Find and Click on Extensions

This image has an empty alt attribute; its file name is image-3.png

You are not yet at adding extensions, and the search you see only searches extensions you’ve already added. So Click on Extensions again. 🙂

This image has an empty alt attribute; its file name is image-4.png

Click on Open Chrome Web Store and Search for “Force Custom Fonts”.

Click Add too Chrome.

This image has an empty alt attribute; its file name is image-6.png

It will show up on the Browser to the right of the URL entry box.

Dyslexia Reading Overlays Examples
Free Dyslexia Font with Each Order from Store:
Order 3 Items receive 3 Dyslexia Font Licenses ($30 value each)

Click on the character to set up the font choice. The Default/Chinese seems to be the only one that works, but it works really well. It gives you a list of all the fonts installed on your computer. Its easy to pause it or turn it off and on, so you can see the web page in its original form easily enough.

This image has an empty alt attribute; its file name is image-8.png

Now repeat to add the extension called “Reader View”.

This image has an empty alt attribute; its file name is image-9.png

One installed, navigate back to extensions and click on Details.

To change the font choices for the extension go to Extension options

This image has an empty alt attribute; its file name is image-10.png

You can edit the CSS, which is the code it uses for styling. Where is looks like this:

/* CSS for sans-serif fonts */
body[data-font=sans-serif] {}

Add “font-family: Dyslandia, sans-serif;” between the curly braces so it looks like this:

/* CSS for sans-serif fonts */
body[data-font=sans-serif] {
font-family: Dyslandia, sans-serif;
}

For serif use “font-family: Booklandia, sans-serif;” You can change the fonts to Typelandia or any other one you choose of course. If you are picking a font that has spaces in its name, in needs to have quotes around it, like “Times New Roman”.

You can also change the back ground color for Light, Dark and Sepia.

Color choices can be found here: https://www.w3schools.com/colors/colors_names.asp. When you click on a color it shows you that color as a background with colors for text! 🙂

You change code that looks like this by adding between the curly braces again. “color:” is for text and “background-color” is for background. When done editing click Save at the bottom. When making a lot of changes, I had to cut and paste sections into different spots to make it save and actually change… it is a bit finicky!

Here are is the text for changing the 3 buttons and fonts. Cut and paste over the existing starting below the “color:#e8e8e8;}”

/* CSS for serif fonts */
body[data-font=serif] {
font-family: “Booklandia”, serif;
}

/* CSS for sans-serif fonts */
body[data-font=sans-serif] {
font-family: “Dyslandia”, sans-serif;
}

/* CSS for “dark” theme dark turquoise */
body[data-mode=dark] { background-color:#00CED1 !important; color:FFFAF0;}

/* CSS for “light” theme gold*/
body[data-mode=light] { background-color:#FFD700 !important; color:#000000; }

/* CSS for “sepia” theme lime green*/
body[data-mode=sepia] { background-color:#32CD32 !important; color:#8B008B; }
}

There you go, you now have a browser that can help you read. If you use gmail in the browser all the email will be in the font you pick as well!

Leave a Comment