Clearer font definitons via a font-face mixin

diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index 46cd37971c9900f393f8ef27c965cfc87e69b4cd..dd1cbadb3325f7180bab524c3761abc91e700c2a 100644 (file)
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,46 +1,23 @@
 $FontPathSourceSansPro: '~npm-font-source-sans-pro/fonts';
+$basePath: '#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro';
 
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-display: swap;
-  src: url('#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro-Regular.ttf.woff2') format('woff2'),
+@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: 400;
-  font-style: italic;
-  font-stretch: normal;
-  font-display: swap;
-  src: url('#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro-It.ttf.woff2') format('woff2'),
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-weight: 600;
-  font-style: normal;
-  font-stretch: normal;
-  font-display: swap;
-  src: url('#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-weight: 600;
-  font-style: italic;
-  font-stretch: normal;
-  font-display: swap;
-  src: url('#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro-SemiboldIt.ttf.woff2') format('woff2'),
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-weight: 700;
-  font-style: normal;
-  font-stretch: normal;
-  font-display: swap;
-  src: url('#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro-Bold.ttf.woff2') format('woff2'),
-}
\ No newline at end of file
+@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