Tutorial

Back to Tutorials

Dyslexia friendly font

Modify the text widget to use a different font

Explore using Frog for CPD... Professional Development Platform

OpenDyslexic font


UPDATE

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.

 

 

The fonts

 

  • 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:
    http://www.webaddress.com/app/file/resource/6727375C200308FD7/?mode=download 
     
  • Add .woff so that your link becomes: file/resource/6727375C200308FD7D7E0FF79E4CEA0198829FCC0C7A4CF4.woff
     
  •  Add them to replace the relevant bits in the code below:
     
<style>
@font-face {
    font-family: "openDyslexic";
    src: url(file/resource/39C3CCF920030515B1DBFF22B7D91207394AD65C502267D8.woff);
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F001D200303FFF6E56F77B906690AB327C2FC06326420.woff");
    font-weight: bold;
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F0F3E20030EA721321F3491BA3D046063DCDC848F129B.woff");
    font-style: italic, oblique;
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F091E200300ABDC76AFFF8047FF061364FD7C83721D3F.woff");
    font-weight: bold;
    font-style: italic, oblique;
}
</style>

 

CSS


The following CSS sets the default for all text widgets:
 

<style>
.widget_text {
    font-family: "openDyslexic";
}
</style>


The following CSS is targeting just Serif font:
 

<style>
.widget_text span[style*="font-family:serif"] {
    font-family: "openDyslexic" !important;
}
</style>

 

Toggle styling


The following code demonstrates how a toggle can be used to turn the styling on and off:
 

<style>
@font-face {
    font-family: "openDyslexic";
    src: url(file/resource/39C3CCF920030515B1DBFF22B7D91207394AD65C502267D8.woff);
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F001D200303FFF6E56F77B906690AB327C2FC06326420.woff");
    font-weight: bold;
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F0F3E20030EA721321F3491BA3D046063DCDC848F129B.woff");
    font-style: italic, oblique;
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F091E200300ABDC76AFFF8047FF061364FD7C83721D3F.woff");
    font-weight: bold;
    font-style: italic, oblique;
}
</style>

<label role="checkbox" data-attr="alert" class="frogui_components_checkbox_toggle label-top" data-mode="full">
<label for="Dyslexictoggle" class="switch-container">Dyslexic font:
    <input type="checkbox" id="Dyslexictoggle" name="Dyslexictoggle" value="1" class="switch-input Dyslexictoggle">
    <div class="switch">
        <span class="switch-label">On</span>
        <span class="switch-label">Off</span>
        <span class="switch-handle">|||</span>
    </div>
</label>
</label>

<script>
var newDiv = $('<div class="dyslexicStyle"></div>');
this.element.append(newDiv);

this.element.find('#Dyslexictoggle').on('click', function(ev) {

    if($(ev.target).val()>0) {
        $(ev.target).val(0);
        $(ev.target).addClass('checked');

        newDiv.html(
                '<style>'+
                '.widget_text {'+
                'font-family: "openDyslexic" !important;'+
                '}'+
                '</style>'
            );
     } else {
        $(ev.target).val(1);
        $(ev.target).removeClass('checked'); 
        newDiv.html('');
     }
});
</script>

 

Download code examples


To download the code examples used in this tutorial click the link below:
 

Code examples
 


Tutorials in this series...

Quicklinks
 

BLOGS