Hey all,

its my first time using lime survey and also I am not super advanced with html coding.
For my thesis I am doing a survey and I would like to use a different font than those provided in lime. However, I am not able to change templates (read something about vanilla or fruity here) - I assume because I am not the admin of the account but my advisor is.
Could anyone help me and explain how to add a new font?
I am using version 2.73 and the template I use is the default template.

Thank you very much in advance for any recommendations!
Marli

Hi, Marli,

without the right to edit the template it is possible but ...
Of course first question: Which fonts?

If you are looking for one of the Google fonts, here an instruction:
Select a font.
Copy the @import - statement, e.g.
<style>
@import url(' fonts.googleapis.com/css?family=Sofia ');
</style>

This you have to insert into the question text of each question.
And your text is to be surrounded by
<span style="font-family: 'Sofia', cursive;">Your text</span> (The correct font-family you also see on the Google page.)

And so you can get:

Possible, but not the best.

Better to include the import statement in the template.

Best regards
Joffm

Hello Joffm,

Thank you very much for the fast reply and the detailed description on how to add a font! I got it and it worked! Thank you!

Now I have a further question...the font I would like to be using does no appear in the google fonts, but I get to an external side where the font is available to buy. I do have the font I want to use as a file on my computer (its available in word), but this does not help me, right?

Best,
Marli

If there is no option to import from a cdn like Google you have to include each format separately (for each font-weight and font-style, and for several browsers)

Could look like this:
Okay, here the font is included in different formats (eot, woff, woff2, ttf and svg); in most cases you will only have the truetype font ".ttf"

/* lato-regular - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('../fonts/lato-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Lato Regular'), local('Lato-Regular'),
url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: url('../fonts/lato-v11-latin-italic.eot'); /* IE9 Compat Modes */
src: local('Lato Italic'), local('Lato-Italic'),
url('../fonts/lato-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v11-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url('../fonts/lato-v11-latin-700.eot'); /* IE9 Compat Modes */
src: local('Lato Bold'), local('Lato-Bold'),
url('../fonts/lato-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v11-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v11-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

On the other side:
Do you have the right to upload this font to the server?
Looks like it is a university installation.
To be honest: Without being able to include into the the template, you shouldn't waste your time.

Joffm

Hello Joffm,

again thank you very much for the detailed and fast reply!!

I tried to change the font using your first recommendation over available google fonts. However, the font does change, but not to the font I would like to. I tried different fonts, but the displayed font seemed always to be the same.

Attached I add a screenshot of what I typed, what it looked liked in the preview and what the font looks like on the google page.
Did I do a mistake here?

This is strange,
Here what I get with your "Risque" font. ("default" template)


And the screenshot from Google.


Here my survey to have a look.
Don't care about the question and the Spanish.

Joffm

Hello Joffm,

thats exactly how I need it to look like.
But you typed in the same thing as I did?

<style>
@import url(' fonts.googleapis.com/css?family=Risque ');
</style>
<span style="font-family: 'Risque', cursive;">text</span>

Could it be that this is also due to me not being the admin of the account?

Thank you very much for your help!