From d392608090a88a402f98f57cb60872dfd3506fd4 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 1 May 2020 23:22:58 +0200 Subject: Clearer font definitons via a font-face mixin --- client/src/sass/include/_fonts.scss | 61 ++++++++++++------------------------- 1 file changed, 19 insertions(+), 42 deletions(-) (limited to 'client/src/sass/include') diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss index 46cd37971..dd1cbadb3 100644 --- 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 -- cgit v1.2.3