css: fix rendering on mobile Safari

It turns out that when only "Roboto" is imported, browsers have to use a
"faux style" for the bold version of Roboto, by applying transforms to
the stroke width and text offset (I'm not sure if those are the correct
technical terms, but so be it). This resulted in Roboto headings looking
really weird in mobile Safari.

The fix is to actually download the font for all font weights/styles I
intend to use, i.e. actually download the bold version of Roboto.

scss/base.scss

@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto');
+@import url('https://fonts.googleapis.com/css2?family=Roboto');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700');
 
 /* adobe color wheel: #e81c50 #c672c8 #743ba3 #10008c #3a6ad8 */