How to add a custom font with CSS?

You can add a custom font with CSS and change how your survey looks. Fonts play an important role to your questionnaire appearance as they add value to your text and help readers to perceive information from it. So make sure you select one that is clear and easily readable.


Essential 
Professional 
Enterprise ✓
ReportR ✓

This guide will teach you:

  1. Online legislation
  2. Google fonts
  3. Create a CSS file
  4. Import font

1. Online legislation

Due to online legislation, we are not authorized to use and install fonts on our web server without a license. If you have a license to use these type styles and also the right to place them on a web server please contact support.  

2. Google fonts

If you do not have a license, we suggest to look for a font that is legally available to use without license (e.g. https://fonts.google.com/). There is a large variety to select from and you can preview each type style with the text and size of your choice.


To find the links you can use to import the type style you want at the Cascading Style Sheets file, you would have to click the View selected families button.

3. Create a CSS file

CSS (Cascading Style Sheets) is a computer language used to adjust the presentation of a HTML or XML document. Adding Custom CSS allows you to change many elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab.


To create this file, you would have to use a simple text editor and then save it with the CSS extension.

How to add a custom font with CSS-save as CSS

At the text editor add the following import URL code 

@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
body {
font-family: 'Karla', sans-serif;
}

Do not forget to change the example link with the one that you will find at the @import tab of the Selected family window.

How to add a custom font with CSS-import link

Alternatively you can use the following code

@font-face {
font-family: "Gotham Book";
src: url("https://surveyanyplace.s3.amazonaws.com/custom/crs/GothamBook.ttf");
}

body {
font-family: "Gotham Book" !important;
}

You should replace this example link with the one you will find at the Selected family window and of course the correct type style name!

How to add a custom font with CSS-font link

NOTE

For adding language specific CSS it is recommended to use the language class for that specific language. 

TIP

formula tipNot all browsers are compatible with all fonts. Make sure to test your survey on different browsers and consider selecting another type style as a second or even third option. You can add as many options as you like as alternatives, the browser will first try the first one and only if it is not working will look at the alternatives.

4. Import font

Now that you have created your file, it is time to upload it. Go to the Design tab of your questionnaire, click on the Additional design elements, then click Add custom CSS  and upload your file.
How to add a custom font with CSS- design tab

Now it is time to click the preview button and check if you like your new style or not.

What's next?

  • How to change question order and type: Change the question order and type fast and easy! You do not need to create everything from scratch, you just need to make some adjustments from a dropdown menu. Likewise, you can reorder your PDF widgets.
  • The final screen aims to give a final message to your respondents, thank them for participating, give further instructions or leave some extra information. It is very important to create a beautiful and informative final page, as this is the last impression your respondents will have from your survey.
  • Copy your questionnaire and your PDF report to create a back up in case you want to implement changes you are not sure you want to keep or to test your formulas and outcomes without risking to loose your progress. You can also link your copied surveys to your copied PDF report. 
S
Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.