Font-family switch possible to do with Sugarcube 2 and Twine 1?

Question

Like with the language toogle switch, is to doable to do a font toggle, to change between ClearSans-Regular and OpenDyslexic on every passage? There's a part of my CSS.

 

.passage {
	color: white;
    padding-left: 0.5em;
    padding-right: 0.5em;
	background-color: #0C090A;
    font-family: ClearSans-Regular;
    font-size: 30px;
    border-style: solid;
    border-color: white;
}

 

Answer 1

If you look at the "Setting Theme" example of the Setting.addList() function in the Setting API documentation, you will learn how to add a List Based Setting option to your story.

You could then use CSS classes on the html element to control which font is currently being used.

.passage {
    font-family: ClearSans-Regular;
}

html.dyslexic .passage {
    font-family: OpenDyslexic;
}

 

Comments

I did something wrong, since the menu dosent work in game, but I can't figure out what.

EDIT: Found the issue. Here are the right codes. It might be useful to somebody.

var settingFontNames = ["Clear Sans", "Open Dyslexic"];

var settingFontHandler = function () {
    var $html = $("html");

$html.removeClass("clearsans");

$html.removeClass("opendyslexic");

    switch (settings.Font) {
    case "Clear Sans":
$html.addClass("clearsans");
        break;
    case "Open Dyslexic":
$html.addClass("opendyslexic");
        break;
    }
};

Setting.addList("Font", {
    label    : "Font",
    list     : settingFontNames,
    onInit   : settingFontHandler,
    onChange : settingFontHandler,
    default  : "Clear Sans",
});

html.opendyslexic .passage {
    font-family: OpenDyslexic-Regular;
}

html.clearsans .passage {
        font-family: ClearSans-Regular;
}