How do I customize the font in my survey? | Experience Community
Skip to main content
MichaelC
Administrator
1 year ago
Solved

How do I customize the font in my survey?

  • November 18, 2019
  • 10 replies
  • 2726 views
C
Forum|alt.badge.img
My organization brand uses a specific font - "Aaux Next". Is there a Custom CSS code that I can input into my survey look and feel so that this appears in my survey?

Best answer by Zhen

Hi @chrissien You can insert following css into Custom CSS, just update the selector to meet your biz requirements css h1, h2, h3, h4, h5, h6, p, div, span, a { font: 16px "Aaux Next", sans-serif; }  

Make sure actual font files is imported in HTML page.

For example font file is hosted in Google, and we can link the font file like this: html <link href="https://fonts.googleapis.com/css?family=AauxNext" rel="stylesheet">  


Hope it helps Cheers, Zhen

10 replies

Z
  • Zhen
  • Answer
  • November 18, 2019

Hi @chrissien You can insert following css into Custom CSS, just update the selector to meet your biz requirements css h1, h2, h3, h4, h5, h6, p, div, span, a { font: 16px "Aaux Next", sans-serif; }  

Make sure actual font files is imported in HTML page.

For example font file is hosted in Google, and we can link the font file like this: html <link href="https://fonts.googleapis.com/css?family=AauxNext" rel="stylesheet">  


Hope it helps Cheers, Zhen

    C
    Forum|alt.badge.img
    • chrissien
    • Author
    • November 20, 2019
    Hi @Zhen Thanks for your reply. This may be somewhat of an inexperienced question. But how do you do this - "Make sure actual font files is imported in HTML page"? Thanks!
    Z
    • Zhen
    • November 20, 2019

    No problem, Chris. Font file can be included to the web page like this:
     

    HTML <link href="https://fonts.googleapis.com/css?family=AauxNext" rel="stylesheet">

    If your page has already been configured to include the font file, then you don't need to do anything;

    Otherwise, change "AauxNext" to whatever your font is named, and paste above code into Qualtrics custom header/footer via survey's "Looks and Feel" editor.

      KeirJ
      QPN Level 2 ●●
      Forum|alt.badge.img+7
      • KeirJ
      • QPN Level 2 ●●
      • April 30, 2020

      Hi chrissien,
      You can also upload the font .ttf file to the Qualtrics files library and then reference that URL in order to pull the font into your survey. Here's an example:
      image.png

        Mkunza
        Forum|alt.badge.img+2
        • Mkunza
        • October 13, 2020

        Once I've uploaded the .ttf file - how do I find the link for the font? Like you have in your example?

          A
          Forum|alt.badge.img
          • Abhinav
          • December 8, 2020

          Hi,

          I have uploaded the .ttf file in the library and used the query shown above but my font is not changing. Also, if there are multiple files that I have uploaded in the library the link is same for both files so how would Qualtrics differentiate between the two?

          Thanks,

          hframe
          • hframe
          • March 9, 2021

          I've uploaded my custom font to the Files Library but I can't seem to work out how to find the full URL to the file to then add to my CSS.
          How to I find the direct URL to the font file?

          R
          • Riccardo
          • March 24, 2021

          I would like to ask a question but it is exactly like the last 3 posted ... so how do you do it? is there anyone able to answer? thank you

          Q

          Where do you find the URL to pull into the CSS code?

          KeirJ
          QPN Level 2 ●●
          Forum|alt.badge.img+7
          • KeirJ
          • QPN Level 2 ●●
          • August 24, 2021

          Qualtrics129512 Mkunza - once the file is uploaded to the Qualtrics library, you can click the gear icon -> right-click 'View' -> copy link address.
          Screen Shot 2021-08-24 at 9.37.44 AM.png

            Terms & ConditionsAccessibility statement