jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 14:46:37 -04:00
Code Issues Activity

playing with variable fonts some more

Browse Source
This commit is contained in:
Jake Jarvis
2020-07-23 13:03:00 -04:00
parent 5b005f8186
commit cdfbba108c
7 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/sass/abstracts/_functions.scss
View File

@ -17,13 +17,20 @@
}
// Web fonts (see components/_typography.scss)
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap, $variable: false) {
@font-face {
font-family: $family;
font-style: $style;
font-weight: $weight;
font-display: $display;
src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff");
@if $variable {
// all browsers that support variable fonts also support woff2, so a woff file is unncessary
// draft spec for formats: https://www.w3.org/TR/css-fonts-4/#src-desc
src: url($base-url + $src + ".woff2") format("woff2-variations"), url($base-url + $src + ".woff2") format("woff2");
} @else {
src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff");
}
// Allow additional rules to be passed in:
@content;

1
assets/sass/components/_global.scss
View File

@ -19,6 +19,7 @@ body {
@supports (font-variation-settings: normal) {
body {
font-family: $webfont-sans-variable;
font-optical-sizing: auto;
}
}

6
assets/sass/components/_typography.scss
View File

@ -14,10 +14,12 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF
*/
// Variable
@include font-face("Inter var", "vendor/inter/inter-subset.var", 100 900) {
@include font-face("Inter var", "vendor/inter/inter-subset.var", 100 900, $variable: true) {
font-named-instance: "Regular"; // stylelint-disable-line property-no-unknown
unicode-range: $unicode-subset;
}
@include font-face("Inter var", "vendor/inter/inter-italic-subset.var", 100 900, italic) {
@include font-face("Inter var", "vendor/inter/inter-italic-subset.var", 100 900, italic, $variable: true) {
font-named-instance: "Italic"; // stylelint-disable-line property-no-unknown
unicode-range: $unicode-subset;
}