Open Dyslexic Font :: Frog | Schools & Education

Tutorial

Dyslexia friendly font

Modify the text widget to use a different font

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>