simplify font loading (#1895)

mitodl · Dec 11, 2024 · 22d1f8c · 22d1f8c
1 parent c1149b3
commit 22d1f8c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git a/frontends/main/src/app/layout.tsx b/frontends/main/src/app/layout.tsx
@@ -24,6 +24,18 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        {/*
+          Font files for Adobe neue haas grotesk.
+          WARNING: This is linked to [email protected]'s Adobe account.
+          We'd prefer a non-personal MIT account to be used.
+          See https://github.com/mitodl/hq/issues/4237 for more.
+        */}
+        <link
+          rel="stylesheet"
+          href="https://use.typekit.net/lbk1xay.css"
+        ></link>
+      </head>
       <body>
         <Providers>
           <MITLearnGlobalStyles />

diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
@@ -3,26 +3,8 @@
 import React from "react"
 import { css, Global } from "@emotion/react"
 import { theme } from "./ThemeProvider"
-import { preload } from "react-dom"
-
-/**
-    Font files for Adobe neue haas grotesk.
-    WARNING: This is linked to [email protected]'s Adobe account.
-    We'd prefer a non-personal MIT account to be used.
-    See https://github.com/mitodl/hq/issues/4237 for more.
-
-    Ideally the font would be loaded via a <link /> tag; see
-      - https://nextjs.org/docs/app/api-reference/functions/generate-metadata#unsupported-metadata
-      - https://github.com/vercel/next.js/discussions/52877
-      - https://github.com/vercel/next.js/discussions/50796
- */
-const ADOBE_FONT_URL = "https://use.typekit.net/lbk1xay.css"
 
 const pageCss = css`
-  @import url("${ADOBE_FONT_URL}"); /**
-    @import must come before other styles, including comments
-  */
-
   html {
     font-family: ${theme.typography.body1.fontFamily};
     color: ${theme.typography.body1.color};
@@ -57,11 +39,6 @@ const pageCss = css`
 `
 
 const MITLearnGlobalStyles: React.FC = () => {
-  /**
-   * Preload the font just in case emotion doesn't put the import near top of
-   * HTML.
-   */
-  preload(ADOBE_FONT_URL, { as: "style", fetchPriority: "high" })
   return <Global styles={[pageCss]}></Global>
 }