chore: 5397 nextjs self host font

frontend/next.config.js

@@ -20,8 +20,6 @@ const HUBSPOT_FORMS_URL = "https://forms.hsforms.com";
 
 const CROSS_REF_URL = "https://api.crossref.org";
 
-const GOOGLE_FONTS_URL = "https://fonts.gstatic.com";
-
 const SCRIPT_SRC = [
   "'self'",
   "'wasm-unsafe-eval'",
@@ -45,10 +43,9 @@ const defaultSecureHeaders = {
         configs.CELLGUIDE_DATA_URL,
         configs.CENSUS_MODELS_DATA_URL,
         CROSS_REF_URL,
-        GOOGLE_FONTS_URL,
       ],
       defaultSrc: ["'self'", HUBSPOT_FORMS_URL],
-      fontSrc: ["'self'", GOOGLE_FONTS_URL],
+      fontSrc: ["'self'"],
       formAction: ["'self'", HUBSPOT_FORMS_URL],
       frameAncestors: ["'none'"],
       // 4513(thuang): Comment out frameSrc for now until we figure out a compliant way to embed

frontend/src/common/theme.ts

@@ -10,6 +10,24 @@ import {
 import { createTheme } from "@mui/material/styles";
 import { defaultAppTheme, makeThemeOptions } from "@czi-sds/components";
 
+import { Inter } from "next/font/google";
+
+export const INTER_FONT_CSS_VARIABLE = "--font-inter";
+
+/**
+ * (thuang): We should only load the font once in the app.
+ * If loading a variable font, you don't need to specify the font weight
+ * `Inter` is a variable font
+ */
+export const inter = Inter({
+  subsets: ["latin"],
+  /**
+   * (thuang): We can't use the font-weight variable here, according to Next.js warning
+   * CSS variable here is used in CSS files
+   */
+  variable: "--font-inter",
+});
+
 const { fontWeights } = defaultAppTheme;
 
 const iconSizes = {
@@ -57,7 +75,7 @@ export const cornersS = (props: CommonThemeProps) => getCorners(props)?.s;
 export const cornersNone = (props: CommonThemeProps) => getCorners(props)?.none;
 
 const typography = {
-  fontFamily: "Inter",
+  fontFamily: inter.style.fontFamily,
   styles: {
     body: {
       button: {

frontend/src/components/common/staticPages/style.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { inter } from "src/common/theme";
 
 export const Layout = styled.div`
   width: 100%;
@@ -10,7 +11,7 @@ export const CommonStyle = styled.div`
   margin: 0px auto;
   padding: 50px;
   line-height: 1.5;
-  font-family: "Inter", sans-serif;
+  font-family: ${inter.style.fontFamily};
 
   h4,
   h5 {

frontend/src/components/common/theme.ts

@@ -1,11 +1,12 @@
 import { css } from "@emotion/react";
+import { inter } from "src/common/theme";
 
 export const PT_GRID_SIZE_PX = 8;
 
 export const PT_TEXT_COLOR = "#10161A";
 
 export const fontStyle = css`
-  font-family: "Inter", sans-serif;
+  font-family: ${inter.style.fontFamily};
   font-style: normal;
   font-size: 14px;
 `;

frontend/src/layout.css

@@ -10,7 +10,7 @@ h5,
 h6,
 a,
 div {
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -21,7 +21,7 @@ div[role="group"][tabindex] {
 
 html {
   min-height: 100vh;
-  font: "Inter", sans-serif;
+  font: var(--font-inter);
   box-sizing: border-box;
   overflow-y: auto;
 }
@@ -32,7 +32,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: black;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: normal;
   word-wrap: break-word;
   font-kerning: normal;
@@ -104,7 +104,7 @@ h1 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: 700;
   text-rendering: optimizeLegibility;
   line-height: 1.1;
@@ -286,7 +286,7 @@ h2 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: bold;
   text-rendering: optimizeLegibility;
   font-size: 1.62671rem;
@@ -302,7 +302,7 @@ h3 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: bold;
   text-rendering: optimizeLegibility;
   font-size: 1.38316rem;
@@ -318,7 +318,7 @@ h4 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: bold;
   text-rendering: optimizeLegibility;
   font-size: 1rem;
@@ -334,7 +334,7 @@ h5 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: bold;
   text-rendering: optimizeLegibility;
   font-size: 0.85028rem;
@@ -350,7 +350,7 @@ h6 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Inter", sans-serif;
+  font-family: var(--font-inter);
   font-weight: bold;
   text-rendering: optimizeLegibility;
   font-size: 0.78405rem;

frontend/src/pages/_document.tsx

@@ -1,4 +1,5 @@
 import { Head, Html, Main, NextScript } from "next/document";
+import { inter } from "src/common/theme";
 import { API_URL } from "src/configs/configs";
 
 export default function Document(): JSX.Element {
@@ -30,12 +31,8 @@ export default function Document(): JSX.Element {
         />
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
         <meta name="theme-color" key="theme-color" content="#000000" />
-        <link
-          href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800&amp;display=swap"
-          rel="stylesheet"
-        />
       </Head>
-      <body data-api-url={API_URL}>
+      <body className={inter.className} data-api-url={API_URL}>
         <Main />
         <NextScript />
       </body>

frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/style.ts

@@ -40,7 +40,7 @@ export const Container = styled.div`
 
 export const CellTypeLabelStyle = styled.div`
   margin: auto;
-  font: normal 12px sans-serif;
+  font-size: 12px;
   white-space: pre;
   margin-left: 24px;
   border: none;
@@ -55,7 +55,7 @@ interface TissueHeaderLabelStyleProps extends CommonThemeProps {
 
 export const TissueHeaderLabelStyle = styled.div`
   margin: auto;
-  font: normal 12px sans-serif;
+  font-size: 12px;
   border: none;
   width: 100%;
   color: ${ECHART_AXIS_LABEL_COLOR_HEX};