surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.17k stars 809 forks source link

[Feature Request] Provide an easy way to use css themes without google fonts #4788

Open CarterQC opened 2 years ago

CarterQC commented 2 years ago

Are you requesting a feature, reporting a bug or asking a question?

Requesting a feature.

What is the current behavior?

Each css theme provided with SurveyJS has google fonts included in the css, so that even if we override the css later, it still makes network requests to google fonts due to the font-face calls like this:

/*!
 * surveyjs - Survey JavaScript library v1.9.43
 * Copyright (c) 2015-2022 Devsoft Baltic OÜ  - http://surveyjs.io/
 * License: MIT (http://www.opensource.org/licenses/mit-license.php)
 */
/* cyrillic-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

That's a problem for privacy minded users as google does a lot of tracking through google fonts, but also anyone with strict content policies on their sites who don't wish to allow other domains.

What is the expected behavior?

It would be great if we could have those fonts optional or split out into their own css file or something, so that we can opt into them. As of right now I'm not sure how to opt out without creating my own theme that could quickly get out of sync with new SurveyJS versions.

xiel commented 1 year ago

In the more recent versions google font free css files are provided that you can use instead. (e.g. v1.9.65)

import 'survey-core/defaultV2.fontless.min.css';
import { StylesManager } from 'survey-core';

StylesManager.applyTheme(`defaultV2`);
andrewtelnov commented 1 year ago

@xiel In the latest version (1.9.67) you don't need to use applyTheme if you have only one theme and don't want to switch between them. So the code can be the following:

import 'survey-core/defaultV2.fontless.min.css';

Thank you, Andrew