Survey font different on different computers | XM Community
Skip to main content

Hi
I am using a custom font in my survey but it isn't showing up on the preview for all collaborators. Why is this?
I imported the font file to Qualtrics and wrote CSS to call it in the look and feel. This works perfectly on my laptop and the survey is shown in the font. However, when my colleague loads the preview on a different computer the font is showing as Times New Roman.
I thought that by loading the font into the qualtrics files that it would be called for anyone who sees the survey?
If this is not the case how do I change the 'back up' font?

Hi there,
I had the same problem with the font import when the font files are stored on the qualtrics platform.
you could try and use the bold "short cut" in the style css
@font-face {  font-family: "font name";
  src:url(/CP/File.php?F=filename in qualtrics) format("truetype")
}
.Skin{
   
font-family: "Font name",Arial,sans-serif;font-weight:400;
}
Best regards

Rudi

Hi thanks for the fast reply,
I have tried this and it still makes no difference.
Neither:
font-face{
font-family:'MyFont', sans-serif;
src: url(https://company.qualtrics.com/WRQualtricsControlPanel/File.php?F=F_eJyqQ2GaYWlUn9Y) format("opentype")
or:
src: url(/CP/File.php?F=F_eJyqQ2GaYWIUn9Y) format("opentype")
Seem to make any difference.
If it can't find the font file why isn't it reverting back to the .Skin font (which is Arial) and instead setting everything as times new roman?

Hi there,
could you send me the preview link please so that I can have a look?

Best regards
Rudi

Hi sure,
This is a stripped down preview:
On my company laptop the custom fonts are showing up exactly as expected, on my private laptop the font is all Times New Roman.
Preview - Qualtrics Survey | Qualtrics Experience Management
Thanks for your help,
Elle

Hi Elle,
would you please post the CSS code for the font import from your style?
and maybe the "html view" of the question in the preview link?

image.png

Best regards

Hi
In the Custom CSS box in Look and Feel >Style I have the code:
@font-face{
font-family: 'Fido', sans-serif;
src: url('https://**company***.qualtrics.com/WRQualtricsControlPanel/File.php?F=F_bKhJKcyym5axyBw');
} h1 {
    font: 30px "Fido";
}


@font-face{
font-family: 'Work Sans', sans-serif;
src: url('https://**company***.qualtrics.com/WRQualtricsControlPanel/File.php?F=F_1T7yfMZ0N5aLH6K');
} h2, h3, h4, h5, h6, p, div, a {
    font: 16px "Work Sans";
}

The html view of the question text and header don't have anything extra in them:
Html of header:

< This should be in custom font! >   
Html of question text:
image.png
Best
Elle

Hi,
have you tried to add the new font to the skin class? I think this is important. Also add the fallback font to the font-family line

.Skin{
 font-family: "Font name",Arial,sans-serif;font-weight:400;
}

best regards

Rudi

Yes I have tried that with no luck.
Even setting the fallback font to Arial it shows as TNM so perhaps its something to do with how the font file is being read?
Best
Elle

Leave a Reply


Terms & Conditions