Settings to modify font face and font size

Authoring Twine
,
1

Twine Version: 2.10.0

I have dropped the script shown below into the javascript section of a new, blank desktop Twine 2.10.0 story. The font size change works, but the font face doesn’t change when I alter it in Settings. I think maybe I’m targeting the wrong element (I know next to nothing about CSS and only a little about html):

Below is the script:

Config.passages.nobr = true;
Config.saves.slots = 3;

var settingFontFamily = ["Serif", "Sans Serif", "Monospace"]; 
var fontFamily = function() {
var $html = $("html"); 
    $html.removeClass("serif sansserif monospace");
switch (settings.fontFamily) { 
    case "Serif":
        $html.addClass("serif");
        break;
    case "Sans Serif":
        $html.addClass("sansserif");
        break;
    case "Monospace":
        $html.addClass("monospace");
        break;
}};
Setting.addList("fontFamily", {
    label		: "Change font type",
    list		: settingFontFamily,
    default     : "Monospace", 
    onInit		: fontFamily,
    onChange	: fontFamily
});	


var settingFontSize = ["75%", "100%", "125%", "150%"];
var resizeFont = function() {
var size = document.getElementById("passages"); 
switch (settings.fontSize) {
    case "100%":
        size.style.fontSize = "100%";
        break;
    case "75%":
        size.style.fontSize = "75%";
        break;
    case "125%":
        size.style.fontSize = "125%";
        break;
    case "150%":
        size.style.fontSize = "150%";
        break;
}
};
Setting.addList("fontSize", {
    label		: "Change Font Size",
    list		: settingFontSize,
    default     : "100%",
    onInit		: resizeFont,
    onChange	: resizeFont
});
2

Huh, it seems to work for me. It only changes the font in the passages, not in, say, the settings dialog box or the sidebar menu or whatever, but that’s the element you’re targeting, yeah.

If you change it to document.body then it gets everything.

3

Thanks, Josh. Yes, I just threw a random paragraph into the start passage; doesn’t seem to change any. I launched the story in three separate browser tabs and set for a different font on each, but tabbing back and forth, the font face looks indistinguishable.

4

:person_facepalming: Gah. I misread. I thought the font size was what wasn’t working. Let me check again.

Oh, I see. You’re adding a class, but a class is just a hook to attach styles to. Then you’d need CSS to actually change the font-family of those classes, maybe something like:

.serif { font-family: serif; }
.sansserif { font-family: sans-serif; }
.monospace { font-family: monospace; }
5

That works, and I understand now. Thanks, Josh!