Use OpenDyslexic Font With Visual Studio Code

If, like me, you suffer from dyslexia and sometimes find it hard to read 📕👨‍💻❓ your code using the standard monospaced font used by your IDE, then the below steps might be of interest to you.

What Is The OpenDyslexic Font?

Wikipedia provides some background to the font.

"OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia, though its benefits have been questioned in scientific studies. The typeface was created by Abelardo Gonzalez, who released it through an open-source license. The design is based on that of DejaVu Sans, also an open-source font."

Download OpenDyslexic Font

Firstly, you can download the awesome free OpenDyslexic font if you haven't already from the following link:-

https://www.opendyslexic.org/

Once you have the OpenDyslexic Font product, then download the OpenDyslexic Mono zip file (monospaced fonts work best when coding).

Note: A monospaced font's letters and characters each occupy the same amount of horizontal space. These are often referred to as fixed-width fonts.

Install OpenDyslexic Mono Font

Note: These steps document how to install the font via Windows 10. Feel free to share in the comment section details on how to install on other operating systems.

Before installing the OpenDyslexic Mono font you'll need to unzip it. Once unzipped, double click the OpenDyslexicMono-Regular.otf file and this will open the font in Windows Font Viewer. Now click the Install button.

Setup Visual Studio Code

Open Visual Studio Code and from the File menu choose Preferences, Settings or use the keyboard shortcut Ctrl + , (Cmd + , on Mac). These font changes can be made for the user or workspace depending on your preference. At this point you'll need to make sure the correct tab is selected.

Type font for the search term and this will now filter the settings to only show those that concern fonts. Find the "Editor: Font Family" (this should be the first setting displayed). In the "Font Family" input box add OpenDyslexicMono to the beginning of the text.

OpenDyslexicMono, Consolas, 'Courier New', monospace

Note: Changes are automatically saved.

Visual Studio Code is making the following change to the settings file behind the scenes.

{
    ...
    "editor.fontFamily": "OpenDyslexicMono, Consolas, 'Courier New', monospace"
}

Below is an example of what to expect when a file is opened using the OpenDyslexic font.

I've found the OpenDyslexic Mono font helpful and I hope it makes a difference for other developers too. It would be good to hear your experiences of using it and whether it makes life any easier via the comments.

Enjoy and happy coding!!!💻