refactor: use next font optimisation for open sans and fira mono

Author: OliverDudgeon

src/components/instances/JobDetails/JobInputSection/JobInputSection.tsx

@@ -10,6 +10,7 @@ import {
   Typography,
 } from "@mui/material";
 
+import { firaMonoFont } from "../../../../constants/fonts";
 import { FILE_PROTOCOL, removeFileProtocol } from "../../../../utils/app/urls";
 import { getErrorMessage } from "../../../../utils/next/orvalError";
 import { CenterLoader } from "../../../CenterLoader";
@@ -66,11 +67,7 @@ export const JobInputSection = ({ instance }: JobInputSectionProps) => {
                 secondary={value.map((val) => (
                   <>
                     SMILES:{" "}
-                    <Typography
-                      component="code"
-                      key={val}
-                      sx={{ fontFamily: "'Fira Mono', monospace" }}
-                    >
+                    <Typography className={firaMonoFont.className} component="code" key={val}>
                       {val.split("\n").join(", ")}
                     </Typography>
                   </>

src/components/tasks/TimeLine.tsx

@@ -19,6 +19,7 @@ import {
 } from "@mui/lab";
 import { Box, Tooltip, Typography, useTheme } from "@mui/material";
 
+import { firaMonoFont } from "../../constants/fonts";
 import { useEventDebugMode } from "../../state/eventDebugMode";
 import { LocalTime } from "../LocalTime";
 
@@ -129,13 +130,13 @@ const TimeLineLabel = ({ children, ...typographyProps }: TimeLineLabelProps) =>
   if (typeof children === "string" && children.includes("\n")) {
     return (
       <Box
+        className={firaMonoFont.className}
         component="pre"
         sx={{
           fontSize: "body2.fontSize",
           m: 0,
           display: "inline-block",
           textAlign: "left",
-          fontFamily: "'Fira Mono', monospace",
         }}
       >
         {children}
@@ -144,11 +145,9 @@ const TimeLineLabel = ({ children, ...typographyProps }: TimeLineLabelProps) =>
   }
   return (
     <Typography
+      className={firaMonoFont.className}
       component="code"
-      sx={{
-        fontFamily: "'Fira Mono', monospace",
-        wordBreak: "break-word",
-      }}
+      sx={{ wordBreak: "break-word" }}
       variant="body2"
       {...typographyProps}
     >

src/constants/fonts.ts

@@ -0,0 +1,13 @@
+import { Fira_Mono as firaMono, Open_Sans as openSans } from "next/font/google";
+
+export const openSansFont = openSans({
+  weight: "variable",
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const firaMonoFont = firaMono({
+  weight: "400",
+  subsets: ["latin"],
+});

src/features/PlaintextViewer.tsx

@@ -8,6 +8,7 @@ import Head from "next/head";
 import Prism from "prismjs";
 import "prismjs/plugins/line-numbers/prism-line-numbers.js";
 import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+import { firaMonoFont } from "../constants/fonts";
 
 export interface PlaintextViewerProps {
   /**
@@ -63,7 +64,11 @@ export const PlaintextViewer = ({
           }}
         >
           <Box sx={{ alignItems: "center", display: "flex", flex: "1 1 auto", gap: 1 }}>
-            <Typography component="h1" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
+            <Typography
+              className={firaMonoFont.className}
+              component="h1"
+              sx={{ wordBreak: "break-all" }}
+            >
               <b>{title}</b>
             </Typography>
             <Divider flexItem orientation="vertical" />
@@ -75,7 +80,7 @@ export const PlaintextViewer = ({
         </Box>
         <Box sx={{ paddingBottom: 1, paddingX: 1 }}>
           <Box className="line-numbers" component="pre" sx={{ overflowX: "auto" }}>
-            <code className="language-">{content}</code>
+            <code className={`${firaMonoFont.className} language-`}>{content}</code>
           </Box>
         </Box>
       </Paper>

src/pages/_app.tsx

@@ -12,15 +12,23 @@ import { HydrationBoundary, QueryClient, QueryClientProvider } from "@tanstack/r
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { enableMapSet } from "immer";
 import { type AppProps } from "next/app";
+import Head from "next/head";
 import { SnackbarProvider } from "notistack";
 
 import { ThemeProviders } from "../components/app/ThemeProviders";
 import { TopLevelHooks } from "../components/app/TopLevelHooks";
+import { openSansFont } from "../constants/fonts";
 import { AS_API_URL, DM_API_URL } from "../constants/proxies";
 import { MDXComponentProvider } from "../context/MDXComponentProvider";
 
 import "../styles/globalStyles.scss";
 
+const openSansFontCss = `
+html {
+  font-family: ${openSansFont.style.fontFamily};
+}
+`;
+
 setDMBaseUrl(DM_API_URL);
 setASBaseUrl(AS_API_URL);
 
@@ -45,6 +53,9 @@ const App = ({ Component, pageProps }: CustomAppProps) => {
 
   return (
     <AppCacheProvider {...pageProps}>
+      <Head>
+        <style>{openSansFontCss}</style>
+      </Head>
       <ThemeProviders>
         <UserProvider
           loginUrl={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/auth/login`}

src/styles/globalStyles.scss

@@ -1,16 +1,5 @@
 @use "mixins/font-face-template" with ($base_url: $assetsURL);
 
-@include font-face-template.font-face-template("Open Sans", "OpenSans-Light", normal, 300);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-LightItalic", italic, 300);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-Regular", normal, 400);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-Italic", italic, 400);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-SemiBold", normal, 600);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-SemiBoldItalic", italic, 600);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-Bold", normal, 700);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-BoldItalic", italic, 700);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-ExtraBold", normal, 800);
-@include font-face-template.font-face-template("Open Sans", "OpenSans-ExtraBoldItalic", italic, 800);
-
 @include font-face-template.font-face-template("Raleway", "Raleway-Thin", normal, 100);
 @include font-face-template.font-face-template("Raleway", "Raleway-ThinItalic", italic, 100);
 @include font-face-template.font-face-template("Raleway", "Raleway-ExtraLight", normal, 200);
@@ -30,8 +19,6 @@
 @include font-face-template.font-face-template("Raleway", "Raleway-Black", normal, 900);
 @include font-face-template.font-face-template("Raleway", "Raleway-BlackItalic", italic, 900);
 
-@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
-
 :root {
   font-size: 14px;
 }