feat: use newly chosen fonts

"Hanken Grotesk" for headings, "Nunito Sans" for body

src/scss/tokens/_font.scss

@@ -1,9 +1,9 @@
-$font-stack-heading: "pragmatica", Helvetica, Arial, sans-serif;
-$font-stack-body: Helvetica, Arial, sans-serif;
+$font-stack-heading: "Hanken Grotesk", sans-serif;
+$font-stack-body: "Nunito Sans", sans-serif;
 $font-stack-monospace: monospace;
 
-$font-weight-body: 400;
-$font-weight-body-strong: 800;
-$font-weight-heading: 700;
+$font-weight-body: 300;
+$font-weight-body-strong: 600;
+$font-weight-heading: 600;
 
 $line-height-body: 2;

src/scss/tokens/fonts.mdx

@@ -9,7 +9,7 @@ import tokens from "./_tokens.module.scss";
 
 ## Headings
 
-**Font:** Pragmatica
+**Font:** Hanken Grotesk
 
 <Typeset
   fontSizes={["2.5rem", "2.0rem", "1.6rem", "1.4rem", "1.2rem", "1.1rem"]}
@@ -27,7 +27,7 @@ import tokens from "./_tokens.module.scss";
 
 ## Body
 
-**Font:** Helvetica
+**Font:** Nunito Sans
 
 <Typeset
   fontSizes={["1.2rem", "1.0rem", "0.8rem"]}

src/scss/typography/_index.scss

@@ -2,4 +2,5 @@
 @forward "code";
 @forward "headings";
 
-@import url("https://use.typekit.net/esn8rgw.css");
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");