Have you subscribed to TheFrogBlog? Find out more
We've turned this tutorial in a FrogCode widget if you find that easier to use. The tutorial is still worth working through, especially if you want to replace the Serif font in the Text widget, but you can just add the widget to your platform and it will install the font for you.
- Download the Fonts from OpenDyslexic
- Convert them using an online converter* to WOFF files (most browser friendly format)
I used https://everythingfonts.com/otf-to-woff , but a quick Google search for online font converter returned lots of results.
- Add the fonts as WOFF files to the File Drop
- Copy the links for each file
- Remove the bits highligted in bold of the links:
- Add .woff so that your link becomes: file/resource/6727375C200308FD7D7E0FF79E4CEA0198829FCC0C7A4CF4.woff
- Add them to replace the relevant bits in the code below:
The following CSS sets the default for all text widgets:
The following CSS is targeting just Serif font:
The following code demonstrates how a toggle can be used to turn the styling on and off:
Download code examples
To download the code examples used in this tutorial click the link below:
Tutorials in this series...