From 22d1f8c76b076ce29bb886f5a1078b14253c3fb0 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Wed, 11 Dec 2024 11:27:10 -0500 Subject: [PATCH] simplify font loading (#1895) --- frontends/main/src/app/layout.tsx | 12 ++++++++++ .../ThemeProvider/MITLearnGlobalStyles.tsx | 23 ------------------- 2 files changed, 12 insertions(+), 23 deletions(-) diff --git a/frontends/main/src/app/layout.tsx b/frontends/main/src/app/layout.tsx index a43a4e6ab5..9b4c7d2ef6 100644 --- a/frontends/main/src/app/layout.tsx +++ b/frontends/main/src/app/layout.tsx @@ -24,6 +24,18 @@ export default function RootLayout({ }>) { return ( + + {/* + Font files for Adobe neue haas grotesk. + WARNING: This is linked to chudzick@mit.edu's Adobe account. + We'd prefer a non-personal MIT account to be used. + See https://github.com/mitodl/hq/issues/4237 for more. + */} + + diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index 1e5fc84dd1..18d2ad5d6c 100644 --- 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 chudzick@mit.edu'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 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 }