Hi, I was able to put something like this in place by adding a dropdown of fonts to the survey's header that will udpate the font of everything on the page when a selection is made, saving the font to an embedded data field to set the font for the rest of the survey.

To give it a try, first create an Embedded Data field called "font" and put it at the top of the Survey Flow. Set its value to a font family that will exist in the selectable dropdown so that something is selected on the first page. Try setting the value to "Helvetica Neue".

Then over in the Look & Feel General section, update the Header of the survey by clicking "edit" and then the HTML/Source view "<>" to insert the below. I found some of the code here. A list of font families that might be included are here.

<script>    Qualtrics.SurveyEngine.addOnload(function() {var values = ="Helvetica Neue", "Arial", "Comic Sans MS", "Montserrat", "Verdana", "Tahoma", "Trebuchet MS"];

    var select = document.createElement("select");
    select.name = "font";
    select.id = "font"

    for (const val of values)
    {
        var option = document.createElement("option");
        option.value = val;
        option.text = val.charAt(0) + val.slice(1);
        select.appendChild(option);
    }

    var label = document.createElement("label");
    label.innerHTML = "Choose your font: "
    label.htmlFor = "font";

    document.getElementById("HeaderContainer").appendChild(label).appendChild(select);

//set fonts
var font = Qualtrics.SurveyEngine.getEmbeddedData('font');
jQuery("#font").val(font);

jQuery("*").css({"font-family":font});

select.onchange = function(){

selected = select.optionsnselect.selectedIndex].text;
jQuery("*").css({"font-family":selected});
Qualtrics.SurveyEngine.setEmbeddedData("font",selected);
} 	   });    </script>

You sir are a genius! Works amazingly, thank you so much!

@Tom_1842 I have a follow up question. This code only works for computer but unfortunately doesn’t work on mobile. Is there some way to modify it so it works on both devices?

I see what you mean. In looking around a bit, it looks like in order to use a font, the device must have the font installed. Mobile devices don’t have Comic Sans pre-installed and so use the device’s default font instead. I think that was the case for all of the font families I used above.

Instead, font families can be loaded in the survey’s Header for use throughout the survey. Google has a lot of options available here, though Comic Sans is not available. Pick some fonts, add them to the survey’s Header, and then update the choices in the dropdown to include the chosen fonts. I also updated the below to add an input event listener instead of onchange to update the fonts.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Comic+Neue">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif">

<script>    Qualtrics.SurveyEngine.addOnload(function() {var values =  "Roboto", "Comic Neue", "Open Sans", "Montserrat", "Noto Serif"];

    var select = document.createElement("select");
    select.name = "font";
    select.id = "font"

    for (const val of values)
    {
        var option = document.createElement("option");
        option.value = val;
        option.text = val.charAt(0) + val.slice(1);
        select.appendChild(option);
    }

    var label = document.createElement("label");
    label.innerHTML = "Choose your font: "
    label.htmlFor = "font";

    document.getElementById("HeaderContainer").appendChild(label).appendChild(select);

//set fonts
var font = Qualtrics.SurveyEngine.getEmbeddedData('font');
jQuery("#font").val(font);

jQuery("*").css({"font-family":font});

select.addEventListener('input', function (event) {

selected = select.optionscselect.selectedIndex].text;
jQuery("*").css({"font-family":selected});
Qualtrics.SurveyEngine.setEmbeddedData("font",selected);
}, false); 	   });    </script>

@Tom_1842 works like a charm, thank you so much!