Scroll

Web fonts in web screens

Web fonts in web screens

Follow

You may want to use a specific font into your web, cati webscreens or tablet survey. for this, there is a few steps to follow (based on an Askia internet template):

 

1/ ensure to get some different versions of your font. Some browsers are able to handle some specific font extensions while some others not. So, basically, to cover all the needs, you will need to have your font in the following format (you can use an online font converter for this):

*.woff

*.eot

*.otf

*.svg

 

2/ add the different font as miscellaneous files in resources.

 

3/ In Design > internet Options > Main CSS, add the following piece of code (where 'fightt' = the name of the font you will use):

@font-face {
font-family: 'my_font';
src: url('??ResPath??fightt.eot');
src: url('??ResPath??fightt.otf') format('truetype'),
url('??ResPath??fightt.woff') format('woff'),
url('??ResPath??fightt.eot?#iefix') format('embedded-opentype'),
url('??ResPath??fightt.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}

 

4/ In Design > Internet Options > Header/Footer > Head, add this in your css properties:

/* Global font family - font size and color for the responses*/
body, td, th, div, p, pre, a, span, li, input, select, textarea, label, legend {
font-family: "my_font";
font-size: 1.0em;
line-height: 1.0em;
outline: none;
text-decoration: none;
}

 

5/ on Web server side, on IIS, please ensure to add MIME Types for the font extensions you will use:

.eot -> application/vnd.ms-fontobject
.woff -> application/font-woff
.svg -> image/svg+xml
.otf -> application/font-sfnt .eot

 

With these options, you will get your specific font on all data collection modes that use web screens.

 

Web:

CATI (with Web screens options):

 

Tablets (iOS / Android):

 

 

 

 

Have more questions? Submit a request

Comments