fix(reader): preload google fonts into reader

Author: collectedmind

clients/web/src/components/fonts/fonts.js

@@ -1,13 +1,3 @@
-import { css } from '@emotion/css'
-
-export const GoogleFonts = css`
-  :global() {
-    @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,600,600i');
-    @import url('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,700i');
-    @import url('https://fonts.googleapis.com/css?family=Zilla+Slab:400,400i,600,600i');
-  }
-`
-
 export const FONT_TYPES = {
   blanco: {
     family: 'Blanco OSF',

clients/web/src/containers/read/reader.js

@@ -183,6 +183,14 @@ export default function Reader() {
         <meta property="og:description" content={excerpt} />
         <meta property="og:site_name" content="Pocket" />
         {image ? <meta property="og:image" content={image} /> : null}
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
+        <link
+          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Vollkorn:ital,wght@0,400..900;1,400..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
+          rel="stylesheet"
+        />
       </Head>
 
       {/**