Custom CSS | XM Community
Skip to main content

Custom CSS

  • December 1, 2022
  • 6 replies
  • 507 views

Forum|alt.badge.img+1

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.

6 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • 1555 replies
  • December 1, 2022

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!


Forum|alt.badge.img+1
  • Author
  • 3 replies
  • December 2, 2022

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.


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • 1555 replies
  • December 2, 2022

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!


Forum|alt.badge.img+1
  • Author
  • 3 replies
  • December 5, 2022

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!


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • 1555 replies
  • December 5, 2022

Forum|alt.badge.img+1
  • Author
  • 3 replies
  • December 6, 2022

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