From f9d893cae8f7900ffe720941426a6699f6ca8394 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 20 Oct 2023 14:29:36 +0300
Subject: [PATCH 1/3] add --sjs-font-family css variable

---
 .../blocks/sd-progress-toc.scss               |  2 +-
 src/defaultV2-theme/variables.scss            | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/defaultV2-theme/blocks/sd-progress-toc.scss b/src/defaultV2-theme/blocks/sd-progress-toc.scss
index 15fdca1aff..60edabc5a6 100644
--- a/src/defaultV2-theme/blocks/sd-progress-toc.scss
+++ b/src/defaultV2-theme/blocks/sd-progress-toc.scss
@@ -1,4 +1,4 @@
-$font-family: var(--font-family);
+$font-family: var(--sjs-font-family, var(--font-family));
 
 .sv_progress-toc {
   padding: calcSize(1);
diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
index b32f6d3215..da456b5455 100644
--- a/src/defaultV2-theme/variables.scss
+++ b/src/defaultV2-theme/variables.scss
@@ -55,42 +55,42 @@ $blue: var(--sjs-special-blue, #437fd9);
 $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1)));
 $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff);
 
-$font-family: var(--font-family);
+$font-family: var(--sjs-font-family, var(--font-family));
 $font-size: var(--sjs-font-size, 16px);
 
-$font-surveytitle-family: var(--sjs-font-surveytitle-family, var(--font-family));
+$font-surveytitle-family: var(--sjs-font-surveytitle-family, #{$font-family});
 $font-surveytitle-weight: var(--sjs-font-surveytitle-weight, 700);
 $font-surveytitle-color: var(--sjs-font-surveytitle-color, #{$primary});
 
-$font-surveydescription-family: var(--sjs-font-surveydescription-family, var(--font-family));
+$font-surveydescription-family: var(--sjs-font-surveydescription-family, #{$font-family});
 $font-surveydescription-weight: var(--sjs-font-surveydescription-weight, 400);
 $font-surveydescription-color: var(--sjs-font-surveydescription-color, #{$foreground-light});
 
-$font-headertitle-family: var(--sjs-font-headertitle-family, var(--font-family));
+$font-headertitle-family: var(--sjs-font-headertitle-family, #{$font-family});
 $font-headertitle-weight: var(--sjs-font-headertitle-weight, 700);
 $font-headertitle-color: var(--sjs-font-headertitle-color, #{$foreground-dim});
 
-$font-headerdescription-family: var(--sjs-font-headerdescription-family, var(--font-family));
+$font-headerdescription-family: var(--sjs-font-headerdescription-family, #{$font-family});
 $font-headerdescription-weight: var(--sjs-font-headerdescription-weight, 400);
 $font-headerdescription-color: var(--sjs-font-headerdescription-color, #{$foreground-dim-light});
 
-$font-pagetitle-family: var(--sjs-font-pagetitle-family, var(--font-family));
+$font-pagetitle-family: var(--sjs-font-pagetitle-family, #{$font-family});
 $font-pagetitle-weight: var(--sjs-font-pagetitle-weight, 700);
 $font-pagetitle-color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
 
-$font-pagedescription-family: var(--sjs-font-pagedescription-family, var(--font-family));
+$font-pagedescription-family: var(--sjs-font-pagedescription-family, #{$font-family});
 $font-pagedescription-weight: var(--sjs-font-pagedescription-weight, 400);
 $font-pagedescription-color: var(--sjs-font-pagedescription-color,
     var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 $font-pagedescription-size: var(--sjs-font-pagedescription-size, $font-size);
 
-$font-questiontitle-family: var(--sjs-font-questiontitle-family, var(--font-family));
+$font-questiontitle-family: var(--sjs-font-questiontitle-family, #{$font-family});
 $font-questiontitle-weight: var(--sjs-font-questiontitle-weight, 600);
 $font-questiontitle-color: var(--sjs-font-questiontitle-color,
     var(--sjs-general-forecolor, var(--foreground, #161616)));
 $font-questiontitle-size: var(--sjs-font-questiontitle-size, $font-size);
 
-$font-questiondescription-family: var(--sjs-font-questiondescription-family, var(--font-family));
+$font-questiondescription-family: var(--sjs-font-questiondescription-family, #{$font-family});
 $font-questiondescription-weight: var(--sjs-font-questiondescription-weight, 400);
 $font-questiondescription-color: var(--sjs-font-questiondescription-color,
     var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -98,7 +98,7 @@ $font-questiondescription-size: var(--sjs-font-questiondescription-size, $font-s
 $font-questionplaceholder-color: var(--sjs-font-questiondescription-color,
     var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 
-$font-editorfont-family: var(--sjs-font-editorfont-family, var(--font-family));
+$font-editorfont-family: var(--sjs-font-editorfont-family, #{$font-family});
 $font-editorfont-weight: var(--sjs-font-editorfont-weight, 400);
 $font-editorfont-color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
 $font-editorfont-placeholdercolor: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));

From 5565ea46a9257f4d980e270ba95f63d72ad7861a Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 20 Oct 2023 16:17:11 +0300
Subject: [PATCH 2/3] fix font-family

---
 src/common-styles/sv-actionbar.scss              | 4 ++--
 src/common-styles/sv-brand-info.scss             | 2 +-
 src/common-styles/sv-drag-drop.scss              | 2 +-
 src/common-styles/sv-list.scss                   | 4 ++--
 src/common-styles/sv-progress-buttons.scss       | 2 +-
 src/common-styles/sv-save-data.scss              | 2 +-
 src/common-styles/window.scss                    | 2 +-
 src/default-styles.scss                          | 4 ++--
 src/defaultV2-theme/blocks/sd-action.scss        | 2 +-
 src/defaultV2-theme/blocks/sd-body.scss          | 2 +-
 src/defaultV2-theme/blocks/sd-button.scss        | 2 +-
 src/defaultV2-theme/blocks/sd-completedpage.scss | 4 ++--
 src/defaultV2-theme/blocks/sd-dropdown.scss      | 2 +-
 src/defaultV2-theme/blocks/sd-html.scss          | 2 +-
 src/defaultV2-theme/blocks/sd-matrixdynamic.scss | 2 +-
 src/defaultV2-theme/blocks/sd-paneldynamic.scss  | 2 +-
 src/defaultV2-theme/blocks/sd-progress-toc.scss  | 2 +-
 src/defaultV2-theme/blocks/sd-title.scss         | 4 ++--
 src/defaultV2-theme/defaultV2.fontless.scss      | 2 +-
 src/defaultV2-theme/variables.scss               | 8 ++++----
 src/dragdrop/choices.ts                          | 2 +-
 src/dragdrop/matrix-rows.ts                      | 2 +-
 src/dragdrop/ranking-choices.ts                  | 2 +-
 src/main.scss                                    | 8 +++++---
 src/modern/blocks/sv-completedpage.scss          | 2 +-
 src/modern/blocks/sv-container.scss              | 2 +-
 src/modern/blocks/sv-dropdown.scss               | 6 +++---
 src/modern/blocks/sv-table.scss                  | 2 +-
 src/modern/blocks/sv-title.scss                  | 2 +-
 src/modern/constants.scss                        | 5 ++++-
 30 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/src/common-styles/sv-actionbar.scss b/src/common-styles/sv-actionbar.scss
index fabed0a039..0b2744b440 100644
--- a/src/common-styles/sv-actionbar.scss
+++ b/src/common-styles/sv-actionbar.scss
@@ -40,7 +40,7 @@
   color: $foreground;
   cursor: pointer;
 
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   overflow-x: hidden;
   white-space: nowrap;
 }
@@ -148,7 +148,7 @@ button.sv-action-bar-item {
   cursor: pointer;
   line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
 }
 
 .sv-expand-action {
diff --git a/src/common-styles/sv-brand-info.scss b/src/common-styles/sv-brand-info.scss
index b68c49bd91..6f275848ca 100644
--- a/src/common-styles/sv-brand-info.scss
+++ b/src/common-styles/sv-brand-info.scss
@@ -2,7 +2,7 @@ sv-brand-info {}
 
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   text-align: center;
   color: #161616;
   background: white;
diff --git a/src/common-styles/sv-drag-drop.scss b/src/common-styles/sv-drag-drop.scss
index b46a7ed56a..defcadb859 100644
--- a/src/common-styles/sv-drag-drop.scss
+++ b/src/common-styles/sv-drag-drop.scss
@@ -10,7 +10,7 @@
   position: absolute;
   z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(1);
   padding-left: calcSize(2.5);
   line-height: calcLineHeight(1.5);
diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
index a459d9b213..0012524277 100644
--- a/src/common-styles/sv-list.scss
+++ b/src/common-styles/sv-list.scss
@@ -5,13 +5,13 @@
   margin: 0;
   overflow-y: auto;
   background: $background;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   list-style-type: none;
 }
 
 .sv-list__empty-container {
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   box-sizing: border-box;
   padding: calcSize(1.5) calcSize(8);
   overflow: hidden;
diff --git a/src/common-styles/sv-progress-buttons.scss b/src/common-styles/sv-progress-buttons.scss
index 3619c376eb..9d9650bf23 100644
--- a/src/common-styles/sv-progress-buttons.scss
+++ b/src/common-styles/sv-progress-buttons.scss
@@ -57,7 +57,7 @@
 .sv_progress-buttons__list li {
   width: 138px;
   font-size: calcFontSize(0.875);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   position: relative;
   text-align: center;
   vertical-align: top;
diff --git a/src/common-styles/sv-save-data.scss b/src/common-styles/sv-save-data.scss
index 60824b9009..0922a090fa 100644
--- a/src/common-styles/sv-save-data.scss
+++ b/src/common-styles/sv-save-data.scss
@@ -14,7 +14,7 @@
   text-align: center;
   z-index: 1600; //todo: should overlap popup
 
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);
 
diff --git a/src/common-styles/window.scss b/src/common-styles/window.scss
index 2dfbcd5a10..0cad22368a 100644
--- a/src/common-styles/window.scss
+++ b/src/common-styles/window.scss
@@ -4,7 +4,7 @@
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(0.875);
   font-style: normal;
   font-weight: 400;
diff --git a/src/default-styles.scss b/src/default-styles.scss
index af3b8fc7b7..f4ea33526d 100644
--- a/src/default-styles.scss
+++ b/src/default-styles.scss
@@ -1292,7 +1292,7 @@ sv-popup {
 }
 
 .sv-popup__body-header {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calc(3 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   font-style: normal;
@@ -1317,7 +1317,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss
index 271c195719..d4305dd047 100644
--- a/src/defaultV2-theme/blocks/sd-action.scss
+++ b/src/defaultV2-theme/blocks/sd-action.scss
@@ -9,7 +9,7 @@
   color: $primary;
   border-radius: calcSize(12.5);
   font-weight: 600;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-size: $font-questiontitle-size;
   line-height: multiply(1.5, $font-questiontitle-size);
diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
index ce1f6b30ef..cefb9514ca 100644
--- a/src/defaultV2-theme/blocks/sd-body.scss
+++ b/src/defaultV2-theme/blocks/sd-body.scss
@@ -170,7 +170,7 @@
       color: $primary;
       font-weight: 600;
       font-style: normal;
-      font-family: var(--font-family, $font-family);
+      font-family: $font-family;
       font-size: $font-questiontitle-size;
       line-height: multiply(1.5, $font-questiontitle-size);
     }
diff --git a/src/defaultV2-theme/blocks/sd-button.scss b/src/defaultV2-theme/blocks/sd-button.scss
index a22a0eaa76..a06ef99374 100644
--- a/src/defaultV2-theme/blocks/sd-button.scss
+++ b/src/defaultV2-theme/blocks/sd-button.scss
@@ -10,7 +10,7 @@
   border-radius: calcCornerRadius(1);
   cursor: pointer;
 
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(1);
diff --git a/src/defaultV2-theme/blocks/sd-completedpage.scss b/src/defaultV2-theme/blocks/sd-completedpage.scss
index 39491874f3..44e539e93f 100644
--- a/src/defaultV2-theme/blocks/sd-completedpage.scss
+++ b/src/defaultV2-theme/blocks/sd-completedpage.scss
@@ -1,5 +1,5 @@
 .sd-completedpage {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-weight: bold;
   box-sizing: border-box;
   text-align: center;
@@ -70,7 +70,7 @@
       color: $primary;
       font-weight: 600;
       font-style: normal;
-      font-family: var(--font-family, $font-family);
+      font-family: $font-family;
       font-size: $font-questiontitle-size;
       line-height: multiply(1.5, $font-questiontitle-size);
     }
diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss
index e020abe10a..6ba7b65a2d 100644
--- a/src/defaultV2-theme/blocks/sd-dropdown.scss
+++ b/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -33,7 +33,7 @@
 
 .sd-dropdown option {
   color: $foreground;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(1);
 }
 
diff --git a/src/defaultV2-theme/blocks/sd-html.scss b/src/defaultV2-theme/blocks/sd-html.scss
index c8aceb210c..59ee354572 100644
--- a/src/defaultV2-theme/blocks/sd-html.scss
+++ b/src/defaultV2-theme/blocks/sd-html.scss
@@ -63,7 +63,7 @@
       color: $primary;
       font-weight: 600;
       font-style: normal;
-      font-family: var(--font-family, $font-family);
+      font-family: $font-family;
       font-size: $font-questiontitle-size;
       line-height: multiply(1.5, $font-questiontitle-size);
     }
diff --git a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
index cd5af272f6..e8975cead5 100644
--- a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
+++ b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
@@ -28,7 +28,7 @@
   border: none;
   line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-weight: 600;
   padding: calcSize(1) 0;
 }
diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
index da96aed89b..c3e4bc4ea9 100644
--- a/src/defaultV2-theme/blocks/sd-paneldynamic.scss
+++ b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
@@ -189,7 +189,7 @@
     background-color: transparent;
     cursor: pointer;
 
-    font-family: var(--font-family, $font-family);
+    font-family: $font-family;
     font-size: $font-editorfont-size;
     line-height: multiply(1.5, $font-editorfont-size);
     color: $font-questiondescription-color;
diff --git a/src/defaultV2-theme/blocks/sd-progress-toc.scss b/src/defaultV2-theme/blocks/sd-progress-toc.scss
index 60edabc5a6..731459c42a 100644
--- a/src/defaultV2-theme/blocks/sd-progress-toc.scss
+++ b/src/defaultV2-theme/blocks/sd-progress-toc.scss
@@ -1,4 +1,4 @@
-$font-family: var(--sjs-font-family, var(--font-family));
+$font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 
 .sv_progress-toc {
   padding: calcSize(1);
diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
index 99c8083f15..ced9ec1789 100644
--- a/src/defaultV2-theme/blocks/sd-title.scss
+++ b/src/defaultV2-theme/blocks/sd-title.scss
@@ -1,6 +1,6 @@
 .sd-title {
   display: block;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   color: $foreground;
   flex-direction: row;
@@ -13,7 +13,7 @@
   align-items: center;
   padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
   overflow: auto;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   gap: calcSize(4);
   box-shadow: 0px 2px 0px $primary;
 
diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
index 2f68724d1e..69f995872a 100644
--- a/src/defaultV2-theme/defaultV2.fontless.scss
+++ b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -62,7 +62,7 @@ body {
   --sd-mobile-width: 600px;
   --sd-timer-size: calc(18 * #{$base-unit});
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   background-color: $background-dim;
   position: relative;
 
diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
index da456b5455..82231e1b5c 100644
--- a/src/defaultV2-theme/variables.scss
+++ b/src/defaultV2-theme/variables.scss
@@ -55,7 +55,7 @@ $blue: var(--sjs-special-blue, #437fd9);
 $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1)));
 $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff);
 
-$font-family: var(--sjs-font-family, var(--font-family));
+$font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 $font-size: var(--sjs-font-size, 16px);
 
 $font-surveytitle-family: var(--sjs-font-surveytitle-family, #{$font-family});
@@ -166,7 +166,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin smallBold {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(0.75);
@@ -174,7 +174,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin defaultBold {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(1);
@@ -182,7 +182,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin defaultFont {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);
diff --git a/src/dragdrop/choices.ts b/src/dragdrop/choices.ts
index 29991cf49d..5857a57e01 100644
--- a/src/dragdrop/choices.ts
+++ b/src/dragdrop/choices.ts
@@ -23,7 +23,7 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
           cursor: grabbing;
           position: absolute;
           z-index: 10000;
-          font-family: var(--font-family, 'Open Sans');
+          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
         `;
 
     const isDeepClone = true;
diff --git a/src/dragdrop/matrix-rows.ts b/src/dragdrop/matrix-rows.ts
index fdb1bcddfb..663f81ad88 100644
--- a/src/dragdrop/matrix-rows.ts
+++ b/src/dragdrop/matrix-rows.ts
@@ -24,7 +24,7 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
           cursor: grabbing;
           position: absolute;
           z-index: 10000;
-          font-family: var(--font-family, 'Open Sans');
+          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
         `;
 
     const isDeepClone = true;
diff --git a/src/dragdrop/ranking-choices.ts b/src/dragdrop/ranking-choices.ts
index af71fa93d8..323e89ac58 100644
--- a/src/dragdrop/ranking-choices.ts
+++ b/src/dragdrop/ranking-choices.ts
@@ -23,7 +23,7 @@ export class DragDropRankingChoices extends DragDropChoices {
           max-width: 400px;
           box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
           background-color: var(--sjs-general-backcolor, var(--background, #fff));
-          font-family: var(--font-family, 'Open Sans');
+          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
         `;
 
     const isDeepClone = true;
diff --git a/src/main.scss b/src/main.scss
index 74538ef1f6..8772061499 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -3,8 +3,10 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-
-$font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+:root {
+  --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+$font-family: var(--font-family, var(--sjs-default-font-family));
 
 @import "./common-styles/sv-progress-buttons.scss";
 @import "./common-styles/sv-progress-toc.scss";
@@ -404,7 +406,7 @@ body {
   // position: relative;
   width: 100%;
   //background-color: var(--body-container-background-color, $body-container-background-color);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: var(--font-size, $font-size);
 
   hr {
diff --git a/src/modern/blocks/sv-completedpage.scss b/src/modern/blocks/sv-completedpage.scss
index 7afa57000d..e7f1d60e34 100644
--- a/src/modern/blocks/sv-completedpage.scss
+++ b/src/modern/blocks/sv-completedpage.scss
@@ -1,5 +1,5 @@
 .sv-completedpage {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: 1.875em;
   font-weight: bold;
   box-sizing: border-box;
diff --git a/src/modern/blocks/sv-container.scss b/src/modern/blocks/sv-container.scss
index 40b5fb18ea..ac29b7a4da 100644
--- a/src/modern/blocks/sv-container.scss
+++ b/src/modern/blocks/sv-container.scss
@@ -1,7 +1,7 @@
 .sv-container-modern {
   color: var(--text-color, $text-color);
   font-size: var(--font-size, $font-size);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
 }
 
 .sv-container-modern__title {
diff --git a/src/modern/blocks/sv-dropdown.scss b/src/modern/blocks/sv-dropdown.scss
index e661e5ba36..b99a421bdb 100644
--- a/src/modern/blocks/sv-dropdown.scss
+++ b/src/modern/blocks/sv-dropdown.scss
@@ -56,7 +56,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: inherit;
   color: var(--text-color, $text-color);
   position: relative;
@@ -108,7 +108,7 @@
   border: none;
   outline: none;
   padding: 0;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: inherit;
   background-color: transparent;
   width: 100%;
@@ -125,7 +125,7 @@
 }
 
 .sv-dropdown--empty:not(.sv-input--disabled) .sv-dropdown__filter-string-input::placeholder {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   color: var(--text-color, $text-color);
 }
 
diff --git a/src/modern/blocks/sv-table.scss b/src/modern/blocks/sv-table.scss
index cd9bdbe069..3a8858ca01 100644
--- a/src/modern/blocks/sv-table.scss
+++ b/src/modern/blocks/sv-table.scss
@@ -58,7 +58,7 @@
 }
 
 .sv-table__cell--header {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-weight: bold;
   text-align: left;
 }
diff --git a/src/modern/blocks/sv-title.scss b/src/modern/blocks/sv-title.scss
index e1609a01d8..f6c9551ce6 100644
--- a/src/modern/blocks/sv-title.scss
+++ b/src/modern/blocks/sv-title.scss
@@ -1,5 +1,5 @@
 .sv-title {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-weight: 700;
   font-style: normal;
   font-stretch: normal;
diff --git a/src/modern/constants.scss b/src/modern/constants.scss
index a3940fe66a..49e5135e74 100644
--- a/src/modern/constants.scss
+++ b/src/modern/constants.scss
@@ -1,7 +1,10 @@
 $header-background-color: #e7e7e7;
 $body-container-background-color: #f4f4f4;
 
-$font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+:root {
+  --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+$font-family: var(--font-family, var(--sjs-default-font-family));
 
 $main-color: #1ab394;
 $main-hover-color: #9f9f9f;

From 8e991ddc5303b5046886117ab6009e6310db5bda Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 20 Oct 2023 16:17:33 +0300
Subject: [PATCH 3/3] Fix budget error

---
 packages/survey-angular-ui/angular.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-angular-ui/angular.json b/packages/survey-angular-ui/angular.json
index 83464d2065..697f89dddc 100644
--- a/packages/survey-angular-ui/angular.json
+++ b/packages/survey-angular-ui/angular.json
@@ -72,7 +72,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumError": "3.5mb"
+                  "maximumError": "4mb"
                 },
                 {
                   "type": "anyComponentStyle",