Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

How to embed a non-standard font into Sawtooth

*disclaimer - I have already read the solution posted for embedding a non-standard font if you have a link to the font ( i.e. google fonts) .

* Using SSI-WEB 8

I need to use a non-standard font in my Sawtooth survey due to client request. I am wondering, if I have a .eot or .woff or .woff2 file, how I am able to insert that into my survey in order to have the entire survey in that file.
asked Apr 26, 2017 by Henry

2 Answers

+1 vote
Best answer
Anything you put in your /graphics/ folder is uploaded with your survey, resulting in a URL you can use to apply the font in your survey.  I put a .ttf in my survey's /graphics/ folder, then put this code in the survey's HTML head tag:

@font-face {
    font-family: "example";
    src: url([% GraphicsPath() %]example.ttf) format("truetype");

body {
    font-family: "example"
answered Apr 26, 2017 by Zachary Platinum Sawtooth Software, Inc. (67,650 points)
+1 vote
The .eot, .svg, .ttf, .woff, and .woff2 fonts are all needed if you want to have maximum compatibility with different browsers because different browsers prefer different font formats.

If you are using Lighthouse Studio 9 you can see how we manage to embed fonts into a survey by including them into a survey style. The Archivo, Lora, and Lato survey styles use fonts.  Here is an example of loading in one font size from the Archivo style sheet:

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/archivo-narrow-v5-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'),
       url('fonts/archivo-narrow-v5-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/archivo-narrow-v5-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/archivo-narrow-v5-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/archivo-narrow-v5-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/archivo-narrow-v5-latin-ext_latin-regular.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
answered Apr 27, 2017 by Nathan Bryce Silver Sawtooth Software, Inc. (7,300 points)