Custom Fonts and Custom Themes

It is often a requirement of survey design to match the exact fonts and CSS styles of your client's branding
Reference Guide
On our Enterprise Version and above you can copy and then edit our base themes, creating your own custom theme.
  1. From the Survey Designer click on Designer -> Content
  2. Select the theme selector using the icon
  3. Click the Theme that you would like to use as the basis of your new theme and then click the Copy Theme button
  4. A new theme is created and your can provide the new theme with a new name to reflect your customizations
  5. Customise the theme parameters
  6. Save the theme changes and apply the new theme to the survey
  7. Adjusting themes can be an iterative process and you may need to adjust, review, edit and repeat to get your theme just right
Some common things that are often asked for is the ability to load custom fonts that a client has supplied. In this case you will need to have the fonts exist on a web server and then can load them using the following CSS. This example uses fonts that are available from the Google Font API.

The example adjusts the font for labels and other text elements used in the survey and also adjusts the size of the navigation buttons. Other styles can be changed with trial and error.

@import url(https://fonts.googleapis.com/css?
   family=Lobster&subset=latin,latin-ext);

.wsc_mainbody,
.wsc_labeltext_p,
.wsc_radiofield-text,
.wsc_labeltext,
.butt_m {
   font-family: 'Lobster',Arial,Helvetica,sans-serif !important;
}

.butt_m {
   font-size: 22px;
   height: 42px;
}

a.butt_m:link {
   font-size: 22px;
    height: 42px;
}

a.butt_m:visited {
    font-size: 22px;
   height: 42px;
}

a.butt_m:hover {
   font-size: 22px;
   height: 42px;
}

a.butt_m:active {
   font-size: 22px;
   height: 42px;
}
We recommend utilizing a tool such as the Chrome Dev Tools which will allow you to see the markup, html structures such as <div> and <p> and the CSS styles that are used for the survey html structures.

This will make it easier to determine the right style to adjust and also allow you to play with the styles to obtain the best result.

The Chrome Dev Tools are perfect when testing your Custom Javascript too.