Code examples are here.

The font families are combined so you require only one CSS declaration

@import './inc/font-face';

html {
    body {  
        div.qti-item {
            font-family: "My Font Family", sans-serif;
        }
    }
}

Available fonts

Open Dyslexic

OpenDyslexic is a new open source font created to increase readability for readers with dyslexia. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from dyslexic users.

Open Dyslexic Website

Open Dyslexic Alta

Same as above but with a rounded a

Roboto

Roboto is a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android.

Wikipedia

Istok

Istok Web is an original typeface, in development since 2008. At first some basic letters were based on specially modified METAFONT sources from the CM Bright font family from the TeX community. [...] But in fact Istok fonts are now very far from this origin.

Google Fonts

Using the font recipes

• merge .scss files with you project files
• copy fonts at the root of your css directory
• adapt the paths in _font-face.scss if needed