13 files changed, 27 insertions, 31 deletions

diff --git a/client/package.json b/client/package.json
index 7ee661193..711be41c2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -96,7 +96,6 @@
     "lodash-es": "^4.17.4",
     "markdown-it": "12.0.2",
     "mini-css-extract-plugin": "^1.3.1",
-    "npm-font-source-sans-pro": "^1.0.2",
     "p2p-media-loader-hlsjs": "^0.6.2",
     "path-browserify": "^1.0.0",
     "primeng": "^11.0.0-rc.1",
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 9d8dffe3d..555126cbc 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -197,7 +197,7 @@ $video-info-margin-left: 44px;
             line-height: 1.37;
 
             a:nth-of-type(2) {
-              font-weight: 500;
+              font-weight: $font-regular;
               font-size: 90%;
             }
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index f369fa17a..6a49866b1 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -15,6 +15,7 @@ $menu-link-icon-margin-right: 18px;
   word-break: break-word;
   padding-right: 20px;
   transition: background-color .1s ease-in-out;
+  line-height: $line-height-normal;
 
   &.active {
     background-color: rgba(255, 255, 255, 0.15);
@@ -208,6 +209,7 @@ menu {
     flex-direction: column;
     align-items: flex-start;
     border-top: 1px solid var(--greyForegroundColor);
+    line-height: $line-height-normal;
 
     a {
       @include menu-link;
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index 4f53ffaf6..2b723a15a 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -27,7 +27,7 @@
     border-radius: 3px;
     font-size: 12px;
     font-weight: $font-semibold;
-    line-height: 1.2;
+    line-height: 1.1;
     z-index: z(miniature);
   }
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index ac53ae7a5..ade8d7033 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -88,6 +88,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
+.badge {
+  line-height: 1.1;
+}
 
 @media screen and (min-width: #{breakpoint(md)}) {
   .modal:before {
@@ -377,7 +380,7 @@ ngb-tooltip-window {
   &:not(.callout-light) {
     border-left-width: .25rem;
   }
-  
+
   &.callout-info {
     border-color: pvar(--mainColorLightest);
     border-left-color: pvar(--mainColor);
diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2
new file mode 100644
index 000000000..4d686e31a
--- /dev/null
+++ b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2
diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2
new file mode 100644
index 000000000..6cefd8f3d
--- /dev/null
+++ b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2
diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2
new file mode 100644
index 000000000..18aab2b90
--- /dev/null
+++ b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2
diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2
new file mode 100644
index 000000000..034bc6b9f
--- /dev/null
+++ b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2
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;
diff --git a/client/yarn.lock b/client/yarn.lock
index d27cdaec8..19768b1d2 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7721,11 +7721,6 @@ npm-bundled@^1.0.1:
   dependencies:
     npm-normalize-package-bin "^1.0.1"
 
-npm-font-source-sans-pro@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/npm-font-source-sans-pro/-/npm-font-source-sans-pro-1.0.2.tgz#c55c8ae368eebdbcaca65425a0d7e1f9a192a03e"
-  integrity sha1-xVyK42juvbysplQloNfh+aGSoD4=
-
 npm-install-checks@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/npm-install-checks/-/npm-install-checks-4.0.0.tgz#a37facc763a2fde0497ef2c6d0ac7c3fbe00d7b4"