Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Adding new font

  • Moppelchen
  • Moppelchen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago #162706 by Moppelchen
Adding new font was created by Moppelchen
How can I add a new font to limesurvey 3.x?
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 2 months ago #162709 by LouisGac
Replied by LouisGac on topic Adding new font
we still have to add a system to easily upload new font packages, to have a version of this folder in upload:
github.com/LimeSurvey/LimeSurvey/tree/70...9e19584/assets/fonts

For now, if what you want is just to add a font in a survey theme: just extends a theme (vanilla or fruity) and then add your font definition in the custom.css file.

To use Google fonts (possible privacy issues), you can have a look to bootswatch themes. For example, here the minified version of flatly:
github.com/LimeSurvey/LimeSurvey/blob/70...tions/flatly.min.css


On top:
Code:
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

This will import the Lato google font.

If you want to add the font files in your theme for more privacy, just copy them in the CSS directory of your theme (for example mytheme/css/fonts/myfont.eot , mytheme/css/fonts/myfont.woff etc), and call them from your css file with the usual fontface definition.
The topic has been locked.
  • Moppelchen
  • Moppelchen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago - 6 years 2 months ago #162714 by Moppelchen
Replied by Moppelchen on topic Adding new font


If you want to add the font files in your theme for more privacy, just copy them in the CSS directory of your theme (for example mytheme/css/fonts/myfont.eot , mytheme/css/fonts/myfont.woff etc), and call them from your css file with the usual fontface definition.


That's exactly what I want. I put the fontfiles in /upload/themes/survey/mi-rot/css/fonts
and took this code in custom.css of the user-designtemplate:
Code:
/* miIconFont */
@font-face {
  font-family: 'miiconfont';
  font-style: normal;
  font-weight: 400;
  src: url('../mi-rot/css/fonts/miiconfont.eot'); /* IE9 Compat Modes */
  src: local('miiconfont'),
       url('../mi-rot/css/fonts/miiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../mi-rot/css/fonts/miiconfont.woff') format('woff'), /* Super Modern Browsers */
       url('../mi-rot/css/fonts/miiconfont.woff') format('woff'), /* Modern Browsers */
       url('../mi-rot/css/fonts/miiconfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../mi-rot/css/fonts/miiconfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

But it still doesn't show the font in the designoptions to chose.
Last edit: 6 years 2 months ago by Moppelchen.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 2 months ago - 6 years 2 months ago #162718 by LouisGac
Replied by LouisGac on topic Adding new font
ok what you want to do is to add a new font into options...
which is pretty different.

Please, first, read this article:
manual.limesurvey.org/New_Template_System_in_LS3.x

We'd like the template providers to create their own option page look and feel. The one we release with 3.0.x is very basic and will evolve a lot in the future.

As explained in the article:

The simple option page simply fills in the advanced form inputs.



For font, in vanilla, here how it works:

1. By default, in the XML, noto font is used by adding the noto package and defining the font option to noto:
github.com/LimeSurvey/LimeSurvey/blob/70...nilla/config.xml#L79
github.com/LimeSurvey/LimeSurvey/blob/70...nilla/config.xml#L58

The noto font package itself is defined here:
github.com/LimeSurvey/LimeSurvey/blob/70...ckages.php#L287-L293
github.com/LimeSurvey/LimeSurvey/blob/70...ssets/fonts/noto.css
(notice the definition of the class .font-noto at the end of the file)

Then, the body class font is defined using this value:
github.com/LimeSurvey/LimeSurvey/blob/70...yout_global.twig#L76
Code:
<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

The XML file only contains the default values for your template configuration. But indeed, those values are defined and read inside the database (table "template_configuration") as json strings. The option page is just a form to update those values. For vanilla fonts:
demo.limesurvey.org/index.php?r=admin/th...tions/sa/update&id=1

In the option field:
{ ..., "font":"noto"}

In the package field:
{...,"font-noto"]}

The option.js file just use the value of the font selector of the simple option to change the value inside the advanced pages:
github.com/LimeSurvey/LimeSurvey/blob/70...options.js#L148-L174



So, as I explained in my first message: to be able to add new fonts easily to the font selector, we must allow user to upload their own assets packages with font.

For now it is not the case, so if you want to add a new font in a font selector, you must create your own custom font selector that doesn't rely on packages, but only on CSS of your own theme. To understand how you can proceed to do that, I suggest you have a look about how works the Fruity custom theme selector.
Last edit: 6 years 2 months ago by LouisGac.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 2 months ago - 6 years 2 months ago #162719 by LouisGac
Replied by LouisGac on topic Adding new font
Also, if you just want to add a new font to your own custom theme without worrying about options, in your css file add:
Code:
.font-miiconfont{
    font-family: 'miiconfont';
}

And in your config.xml, in the option field, replace:
Code:
<font>noto</font>

By:
Code:
<font>miiconfont</font>

Then reinstall your template to load the XML into db, and now miiconfont will be used
(warning: saving from option page will overwrite the value of miiconfont)
Last edit: 6 years 2 months ago by LouisGac.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 2 months ago #162725 by LouisGac
Replied by LouisGac on topic Adding new font
Ok, I've just added an entry to the manual, giving an example about how to add your own custom font selector in options:
manual.limesurvey.org/New_Template_Syste...om_fonts_to_my_theme

It will be easier when we'll have the asset package uploader
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose