Custom CSS | XM Community
Skip to main content

Hello,
I'm trying implement some custom CSS using an internal font. Here is what I have so far but cannot get it to work. instead I am only seeing the default font, or Helvetica:
@font-face {
font-family: 'RocketSans', sans-serif;
src: url('https://www.rockomni.com/mcds/assets/GlobalContent/NonStockImages/Fonts/RocketSans-Regular.woff2'); 
}

h1, h2, h3, h4, h5, h6, p, div, span, a,
body {
font-family: RocketSans, Helvetica, 'Helvetica Neue', Arial, sans-serif;
}


I also tried this from another example I found here:
@import url('https://www.rockomni.com/mcds/assets/GlobalContent/NonStockImages/Fonts/RocketSans-Regular.woff2');


.Skin .QuestionText {
font-family: 'RocketSans-Regular', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}


.Skin .QuestionBody {
font-family: 'RocketSans-Regular', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}

Is there another way I can write this to get the intended results?

Thank you,
Brian H.

https://community.qualtrics.com/XMcommunity/discussion/23208/custom-cssDownload the font library include it in Qualtrics files library pick that files URL and add that as a source to your code
I believe Qualtrics is unable to pick that library
Hope it helps!

Thank you Deepak
I believe I got the file into the library. I wasn't able to find an example of how to point to it from the custom CSS field.

https://community.qualtrics.com/XMcommunity/discussion/comment/52782#Comment_52782You can view the file and right click on download and copy the link as shown in image below. Then from the link remove the (&download=1) part. Include that as src.url.
image.pngHope it helps!

Ok, I am not great at this, so I am making sure here:
Files Library:
image.png
I right click on Download after selected the above file and selected "Copy Link Address". When I pasted it in the below custom CSS I removed the "&download=1"
Custom CSS:
@font-face {
font-family: "RocketSans-Regular";
src: url("https://rocketcentral.qualtrics.com/WRQualtricsControlPanel/File.php?F=F_4ZQqSJuEzIxPcua"); 
}

h1, h2, h3, h4, h5, h6, p, div, span, a,
body {
font-family: "RocketSans-Regular";
}
Do I need the -Regular as it is part of the file name? Is this the "best" way to format the code?

Thank you again!

https://community.qualtrics.com/XMcommunity/discussion/comment/52873#Comment_52873Yes, you are right about the configuration.

Awesome, thank you. I did get this to work and can see the difference between the Default and the cutom font. Much appreciated!

Leave a Reply


Terms & Conditions