Clearer font definitons via a font-face mixin

This commit is contained in:
Rigel Kent 2020-05-01 23:22:58 +02:00
parent ca4b1594a7
commit d392608090
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
1 changed files with 19 additions and 42 deletions

View File

@ -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'),
}
@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);