Providing Canvas web pages using a font designed to help people with Dyslexia

There are several ways to help support users with fonts that are easier for someone with Dyslexia to read or when a user simply prefers reading text in another font. I would like to thank Jeremy Perkins Links to an external site. for pointing out the first two of these methods.

OpenDyslexic plugin

There is a OpenDyslexic plugin for (Chrome, Opera, and Safari) browsers see https://opendyslexic.org/ Links to an external site.

An example of using this plugin in Chrome when looking at https://kth.instructure.com/courses/85 is shown below:

Force Font

In Chrome there is a plugin called Force Font (https://chrome.google.com/webstore/detail/force-font/iidenkflofaiinggabfmdjbomolidnie/related?hl=en-US Links to an external site. ) that can be used to replace the font used in a web page with your choice of font. In this case I have chosen to display the page using Times New Roman:

Background about the fonts used in Canvas

Lato became the primary font as described in the Canvas Production Release Notes (2016-12-10)

The current font loading happens via a line in a Canvas web page of the form:

This javascript file ends with

new FontFaceObserver('LatoWeb').load().then(function () {
document.documentElement.classList.add('lato-font-loaded');
}, console.log.bind(console, 'Failed to load Lato font'));

[Background information about this can be found at GitHub - bramstein/fontfaceobserver: Web font loading. Simple, small and efficient. Links to an external site. ]

This suggests that an alternative to using a plugin is to host a font locally (or load this font directly in your browser) with the same name as the font to be loaded - in this case, the browser will use the installed or local font! For information about loading a font locally see How To Links to an external site.Host Google Fonts Locally - The PHP Hero Links to an external site..

For those who are really interested, there is a discussion about this at https://community.canvaslms.com/groups/canvas-developers/blog/2017/04/05/user-specific-css-selection-to-utilize-the-dyslexie-font?commentID=80986&et=watches.email.outcome#comment-80986 Links to an external site.