perf: use recommended Google Fonts workflow

Use what is currently the best workflow for importing variable web fonts
from the Google Fonts API:
- https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/
- https://csswizardry.com/2020/05/the-fastest-google-fonts/

Perhaps in the future I'll look into self-hosting fonts, but Google
Fonts is nice because Chrome and other browsers are able to cache the
responses and reuse them across websites.

Related to: vercel/next.js#16065

components/page/index.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useEffect } from 'react';
+import { GoogleFonts } from 'next-google-fonts';
 import Head from 'next/head';
 import cn from 'classnames';
 
@@ -7,6 +8,7 @@ import Segment from 'components/segment';
 
 import { PageProps } from 'lib/page';
 
+import segmentSnippet from './segment-snippet';
 import styles from './page.module.scss';
 
 export interface PageComponentProps extends PageProps {
@@ -141,20 +143,11 @@ export default function PageComponent({
           content='/favicon/ms-icon-144x144.png'
         />
         <meta name='msapplication-navbutton-color' content='#0070f3' />
-        <link
-          rel='preconnect'
-          crossOrigin='anonymous'
-          href='https://segment.tutorbook.org'
-        />
-        <link
-          rel='preconnect'
-          crossOrigin='anonymous'
-          href='https://track.tutorbook.org'
-        />
-        <script>{`!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error('Segment snippet included twice.');else{analytics.invoked=!0;analytics.methods=['trackSubmit','trackClick','trackLink','trackForm','pageview','identify','reset','group','track','ready','alias','debug','page','once','off','on','addSourceMiddleware','addIntegrationMiddleware','setAnonymousId','addDestinationMiddleware'];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement('script');n.type='text/javascript';n.defer=!0;n.src='https://segment.tutorbook.org/analytics.js/v1/'+t+'/analytics.min.js';var a=document.getElementsByTagName('script')[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION='4.1.0';analytics.load('${
-          process.env.NEXT_PUBLIC_SEGMENT_KEY as string
-        }');}}();`}</script>
+        <link rel='preconnect' href='https://segment.tutorbook.org' />
+        <link rel='preconnect' href='https://track.tutorbook.org' />
+        <script>{segmentSnippet}</script>
       </Head>
+      <GoogleFonts href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap' />
       <div
         data-cy='page'
         className={cn(styles.wrapper, { [styles.borderless]: borderless })}

components/page/segment-snippet.ts

@@ -0,0 +1,3 @@
+export default `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error('Segment snippet included twice.');else{analytics.invoked=!0;analytics.methods=['trackSubmit','trackClick','trackLink','trackForm','pageview','identify','reset','group','track','ready','alias','debug','page','once','off','on','addSourceMiddleware','addIntegrationMiddleware','setAnonymousId','addDestinationMiddleware'];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement('script');n.type='text/javascript';n.defer=!0;n.src='https://segment.tutorbook.org/analytics.js/v1/'+t+'/analytics.min.js';var a=document.getElementsByTagName('script')[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION='4.1.0';analytics.load('${
+  process.env.NEXT_PUBLIC_SEGMENT_KEY as string
+}');}}();`;

package.json

@@ -147,6 +147,7 @@
     "firebase-functions": "^3.13.0",
     "nanoid": "^3.1.12",
     "next": "^10.0.9",
+    "next-google-fonts": "^2.1.0",
     "next-translate": "^0.17.1",
     "nprogress": "^0.2.0",
     "password-generator": "^2.3.2",

styles/global.scss

@@ -26,7 +26,6 @@
 
 @use '@rmwc/tooltip/tooltip';
 
-@import url('https://fonts.googleapis.com/css?family=Inter:100,200,300,400,500,600,700,800,900&display=swap');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import 'social-icons';
 @import 'nprogress';

yarn.lock

@@ -13603,6 +13603,17 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
+"next-google-fonts@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "next-google-fonts@npm:2.1.0"
+  peerDependencies:
+    next: ">= 10.0.7"
+    react: ">= 17.0.1"
+    react-dom: ">= 17.0.1"
+  checksum: 8beeb146ca2ed63cf3a889a07ec98989d5fd1669db97a3213092a5670980f50401b37cc7a6ba45ca4a60469e2b382ef421ae53c0f7bfdc1aa5654509af561399
+  languageName: node
+  linkType: hard
+
 "next-images@npm:^1.6.2":
   version: 1.6.2
   resolution: "next-images@npm:1.6.2"
@@ -18452,6 +18463,7 @@ resolve@^1.18.1:
     istanbul-lib-coverage: ^3.0.0
     nanoid: ^3.1.12
     next: ^10.0.9
+    next-google-fonts: ^2.1.0
     next-images: ^1.6.2
     next-translate: ^0.17.1
     nprogress: ^0.2.0