Hi,
I want to use a particular font in my survey specified by my organization. Can anyone please tell me a step by step process on how to use it?
Thanks in advance.
Regards,
Best answer by ahmedA
View original
Using a custom font
You can look at this answer: https://www.qualtrics.com/community/discussion/7144/how-do-i-customize-the-font-in-my-survey#latest
Hello,
I have looked at the answers that have been posted and even commented on that but that solutions is not working for me.
Would you be so kind to share an elaborate process on how I can achieve that?
On your survey editor, go to "Look and feel --> Style --> Custom CSS". You'll see a box over there. You can paste all your style related options in it.
Suppose you want to set the font to Roboto, which is hosted on Google Fonts. Then you'll use this code:
@font-face{
font-family: 'Roboto', sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
}
h1, h2, h3, h4, h5, h6, p, div, span, a {
font: 16px "Roboto", sans-serif;
}
The first segment imports your font to the survey. Specifying the name and the location from where it needs to be imported.
The segment
h1, h2, h3, h4, h5, h6, p, div, span, atells Qualtrics where all it should use the font. h1, div, a etc. are html tags to identify elements on the webpage. This should cover most, but if you have custom tags, you'll need to look up the tag in the survey preview and add it here.
If you already have the font file, you can import it into Qualtrics and refer to it based on how the other answer mentioned. If not, then find a source for it. Google Fonts is a good place to start.
Let me know if it works for you.
ahmedA
Thanks alot for the elaborate explanation. It definitely helps improve my understanding about changing fonts in Qualtrics but the problem is that the font I'm talking about is specific to my organization and doesn't exist on google fonts.
I have it saved locally. I have tried uploading that in the qualtrics library and then referencing that URL in my css code but that doesn't seem to be working for me.
Could you please tell me what should the code look like if:
- I have the font saved locally.
- If I have uploaded it on qualtrics library.
I am sorry. There was an error in the code above, I had missed a
":"after
src.I've now changed it.
You can cannot use a local font, as you'll be distributing the survey online. For option 2, upload the file to your Qualtrics library. Then get it's link. The easiest way is to click on the file after it is uploaded, right click on "view" and copy the link address. In the example below, I downloaded a font from the internet, uploaded it to my Qualtrics library and am now using it.
@font-face{
font-family: 'Vegan Style';
src: url('https://qualtrics domain/CP/File.php?F=F_aUVRNt6I7YyxDcp');
}
h1, h2, h3, h4, h5, h6, p, div, span, a {
font-family: 'Vegan Style';
}
ahmedA
Thank you for your help. I think there is some problem that I'll need to take up with the Qualtrics support team maybe because I've been doing everything correctly so far but it doesn't seem to be working. I also tried uploading the font file in 2 different formats in qualtrics (woff and ttf) and following this process but my fonts just wont change in the survey.
Thank you for your time. I really appreciate it.
If you get a response from Qualtrics support, please share what the problem was. Ideally the code above should work, however, it would be nice to know if they have made some changes at the backend. Provided the problems are not confidential.
thanks,
+3
Confirming that this was the response I got from Qualtrics support when I asked why I couldn't find the URL after uploading the ttf to the library:
I talked to our Internal team and according to them, only Google Fonts are able to be used as custom fonts currently for Dynamic themes. Therefore, you will unfortunately not be able to add your font using a .ttf file currently to a Dynamic theme.
https://community.qualtrics.com/XMcommunity/discussion/comment/42870#Comment_42870If the support team is saying that you can only import fonts using Google fonts and not via the library, then they are being lazy and lying.
I have several surveys in the field, and my fonts sometimes come from the Qualtrics library. I do prefer google fonts as they load faster, however it is possible and nothing is stopping you from doing that.
I have faced this issue many times with the support team, anything you ask them, the first response is either sorry can't be done or contact the community. However, if you keep pushing, then they do their job sometimes.
+3
https://community.qualtrics.com/XMcommunity/discussion/comment/42898#Comment_42898In that case, do you have any ideas on how to implement them? I've uploaded the files to my library but I can't access the URL that is referred to above.
Hello, I am having an issue with the custom google font only appearing in chrome, and not for all users using the code above. Has anyone else experienced this issue and found a solution?
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.