Changing font for the survey using custom css | XM Community
Skip to main content
Question

Changing font for the survey using custom css

  • 1 July 2024
  • 4 replies
  • 32 views

I am trying to change the font of the survey and it won’t work. I have downloaded the ttf file and uploaded it in Qualtrics library and linked it in the code. It still won’t work.

Could you please highlight what might be wrong?
Here is the code - 
 

 

4 replies

Userlevel 4
Badge +11

Hi @f_SI ,

 

Please try with below code:

 

@font-face{

      font-family: 'trebuchet ms';

      src:url('replace your url');

}

h1, h2, h3, h4, h5, h6, p, div, span, a {

  font-family: 'trebuchet ms';

  color : #000000;

}

 

Thank you!

Badge +2

@Nanditha MM , Thanks for your reply.

I tried your given code, it does not work.

I also want to point out. that below is the code I am already using in Custom css. Pasting it here in case it might be affecting the code you have given - 

 

.Skin .SkinInner {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgb(0, 163, 224);
    padding: 20px;
    margin: 20px auto;
    max-width: 1200px;
    overflow: hidden; 
}
.Skin .QuestionText {
    color: #333333;
}
.Skin .ChoiceStructure {
    margin-top: 10px;
}

.Skin .SkinContent {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgb(0, 163, 224);
    padding: 20px;
    margin: 20px auto;
    max-width: 1000px; 
 

Userlevel 4
Badge +11

Hi @f_SI No, the above code is unlikely to affect the code.

Userlevel 4
Badge +11

Hi @f_SI , The code worked for me. I hope that once you upload the .ttf font file to the library and you are using the file link address.

 

 

  This may help you : How do I customize the font in my survey? | XM Community (qualtrics.com)

 

Thank You

Leave a Reply