Fonts: Use fontsource package for loading fonts

[Blendify]

fontsource is the new defacto source for google fonts.
Originally, this was typeface-* however that is now deprecated.
Not sure why but there does not seem to be woff2 formats for the all character sets.
But the new fonts are already smaller than the old woff2 as we now only include the needed font weight.

[ayuhito]

The ‘all’ subset only exists for woff only to support older browsers where smaller file sizes are a less of a concern. Older browsers don’t have the unicode-range selector and thus it isn’t possible for the browser to detect what’s needed, hence everything is served.

For newer browsers that support the unicode-range selector, everything is split up to ensure your browser only downloads what’s needed based on the content of the webpage.

I wouldn’t recommend to only import the woff files and instead directly import the css or use the fontFace Sass mixin which accounts for the best of both worlds.

[Blendify]

Thanks for the explanation, we may want to wait until an issue with the fontFace mixin is fixed, see fontsource/fontsource#153

[ayuhito]

The documentation on the main repo README states the new method to import fonts using the @use Sass command. I would recommend using that and forget about default variables for now since I'm not sure how that will pan out.

[Blendify]

Will still use node sass and as far as I know those statements are not supported. I made a patch to switch to dart sass but I don't think it is worth it until we can remove wyrm and bourbon which depend on node sass.

sass/node-sass#2886