Modifying survey fonts

The standard font used in Digital is Open Sans. Other fonts, including Arial and Times New Roman, are commonly available in Windows or Mac OS operating systems. These fonts are built into those operating systems and are accessible with any installed browser.

Web fonts allow you to use fonts that are not installed on the user's computer. When you have found or purchased the font that you wish to use, include the font file on your web server and it is automatically downloaded to the user when needed. Your own fonts are defined within the CSS @font-face rule, as shown in the following example:

Note: The src: property must be a valid HTTPS URL that is publicly accessibly Internet address to a supported font file.

@font-face {
      font-family: "Timeburner" !important;
      src: url
("https://assets.kampyle.com/clients/nebula/sample_files/timeburnernormal.tff");
      }

Applying the font
Survey text CSS selectors

Applying the font

Once the font is loaded, use a CSS selector to apply it to a text object. There are various CSS selectors that control the text objects to which the font will be applied. Use the standard CSS properties to alter the way a font is displayed.

The following is a mandatory property:

Font-family — Name of the font defined in the @font-face rule.

The following are optional properties:

Font-size — Use either px or em to set the size of the characters.
Font-style — Normal, italic, oblique.
Font-weight — Bold or normal.
Color — Use standard HTML color names or any HEX, RGB value set, or other valid CSS color value. The following links offer full reference for this property:
https://www.w3schools.com/colors/colors_names.asp
https://www.w3schools.com/colors/default.asp

Survey text CSS selectors

The following shows all text elements in the survey:

#liveForm .btn, #liveForm div > label, #liveForm div > span,
#liveForm .neb-select .neb-content.native-arrow select,#liveForm
.kpl_builder .kpl-thank-you .kpl-thankYouHolder
.thankYouPageLogoPreviewText {
     font-family: "Timeburner" !important;
}

The following shows rating scale numbers, checkbox, and radio button options:

#liveForm span {
     font-family: "Timeburner" !important;
     }

The following shows a dropdown text box:

#liveForm .kpl_builder .live-form-content .neb-select select{
 font-family: "Timeburner" !important;
     }

The following shows text in a rating scale:

#liveForm .native-display-value-in-rating{
font-family: "Timeburner" !important;
     }