Style: Import all font weights

[manuq]

Add a list of all possible weights for each font (Lato, Poppins) and import them.

This should be done with a single import line, but it fails with wrong paths to the font file. So we have to use the SCSS mixin.

Previously only the default font weight (400) was being imported, so text with other weights looked different depending on the web engine used.

Fixes #810

[dylanmccall]

Okay, figured the woff file thing out to my satisfaction. It isn't really anything we can fix, but kind of an issue with upstream Kolibri: their base webpack configuration inlines woff and woff2 files when they are below 10 kB, and it just happens that a lot of the fallback font files here are below 10 kB. Which adds up. Other than that, whatever, it's fine.

I did notice one thing, which is if we update the @fontsource/ dependencies to ^5.0.8, we can use some shiny new mixins that are a little easier to read, and we could limit formats to woff2 to save space since we can be pretty sure our target platforms support it:

@include Lato.faces(
  $weights: (
    400,
    700,
  ),
  $formats: woff2
);

@include Poppins.faces(
  $weights: (
    400,
    600,
    700,
  ),
  $formats: woff2
);

[manuq]

@dylanmccall it is really great to only add the specific weights being used. I wasn't sure how to find out since the CSS is split in each component. But I've been testing and your list seems complete! I also verified quickly with git grep weight.

Also the SCSS mixin in the v5 version is very handy. I copy-pasted your code and it worked. Thanks! Ready for a second review.