Best answer by Zhen
View original
How do I customize the font in my survey?
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?
Userlevel 4
+7
Qualtrics129512 Mkunza - once the file is uploaded to the Qualtrics library, you can click the gear icon -> right-click 'View' -> copy link address.
https://community.qualtrics.com/XMcommunity/discussion/comment/24802#Comment_24802Where do you find the URL to pull into the CSS code?
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
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?
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,
Userlevel 1
+2
Once I've uploaded the .ttf file - how do I find the link for the font? Like you have in your example?
Userlevel 4
+7
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:
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.
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.
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!
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!
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
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
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.