Use source sans 3 font

3 files changed, 19 insertions, 22 deletions

diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index dd1cbadb3..be1132160 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,23 +1,15 @@
-$FontPathSourceSansPro: '~npm-font-source-sans-pro/fonts';
-$basePath: '#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro';
-
-@mixin fontface($name, $path, $weight: null, $style: null, $exts: woff2) {
-  $src: null;
-  @each $ext in $exts {
-    $src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma);
-  }
-  @font-face {
-    font-family: quote($name);
-    font-weight: $weight;
-    font-style: $style;
-    font-stretch: normal;
-    font-display: swap;
-    src: $src;
-  }
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
 }
 
-@include fontface('Source Sans Pro', '#{$basePath}-Regular.ttf', 400, normal);
-@include fontface('Source Sans Pro', '#{$basePath}-It.ttf', 400, italic);
-@include fontface('Source Sans Pro', '#{$basePath}-Semibold.ttf', 600, normal);
-@include fontface('Source Sans Pro', '#{$basePath}-SemiboldIt.ttf', 600, italic);
-@include fontface('Source Sans Pro', '#{$basePath}-Bold.ttf', 700, normal);
\ No newline at end of file
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2');
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 10ab44f57..0ce22354e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -180,6 +180,7 @@
 
 @mixin grey-button {
   @include button-focus($grey-button-outline-color);
+
   background-color: $grey-background-color;
   color: pvar(--greyForegroundColor);
 
@@ -247,6 +248,10 @@
 }
 
 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal !important;
+
   my-global-icon {
     position: relative;
     width: $width;
@@ -807,7 +812,6 @@
   .dashboard-num, .dashboard-text {
     text-align: center;
     font-size: 130%;
-    line-height: 21px;
     color: pvar(--mainForegroundColor);
     line-height: 30px;
     margin-bottom: 20px;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b1e0431bb..acdc8d05f 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -7,6 +7,7 @@ $main-fonts: 'Source Sans Pro', sans-serif;
 $font-regular: 400;
 $font-semibold: 600;
 $font-bold: 700;
+$line-height-normal: 1.2;
 
 $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;