How to change the font I use universally in a survey to Roboto light

Question

Hello, I’m wondering if anyone has the correct CSS to change the font I use universally in all of our surveys to Roboto light?Currently I am changing EVERY line in my surveys one by one to: (then I change the size to what I want to use).I found one post in the Community from a few years ago about this topic, which said to use (but didn’t work):.Skin .QuestionText, .Skin .QuestionBody {font-family:Roboto light,sans-serif!important;} I asked ChatGPT and got this (which also isn’t working):/* Import Roboto Light from Google Fonts */@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');/* Apply Roboto Light everywhere */.Skin * { font-family: 'Roboto', sans-serif !important; font-weight: 300 !important; /* Ensures the "Light" weight is used */} Does anyone have any other recommendations I can try? I appreciate the assistance!

tlawish · Accepted Answer

FYI - ChatGPT came to the rescue. The first response it gave me didn’t work, and I told it so. So it provided another response - and it worked! For anyone else looking to do this:In the look and feel:/* Force FONT NAME on all survey elements */html, body, .Skin, .Skin * {font-family: 'FONT NAME', sans-serif !important;}

DRichcreek · Answer

In order to ensure that all elements are using the correct font-family theAdmin > Themes> Style > Custom CSS section will ensure any future surveys will be using the same styling/fonts.I would recommend removing the !importantrule as it isn’t necessary and it will override standard css rules.For example in your initial code you added the !important to the google font import to ensure the font was applied and the font-weight to 300. While initially it make work, headings

and bold tags use other font-weights to differentiate themselves.The following code will work to ensure your Rich Text fields and custom HTML will display correctly. It will also ensure you can embed other custom fonts on sub-elements/questions, otherwise your existing code will overwrite every attempt to change font-family./* Imports Roboto Font-Family from Google Fonts (Including Italics and Weights)/@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');/ Will default all elements to start with the correct font and weight./ { font-family: 'Roboto', sans-serif; font-weight: 300;}If everything isimportant, nothing is~ Patrick M. Lencioni

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded