import Lato and define `--font-family-sans-serif` in _app.page.tsx

apps/app/src/pages/_app.page.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement, ReactNode, useEffect } from 'react';
 import { NextPage } from 'next';
 import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
+import { Lato } from 'next/font/google';
 import { SWRConfig } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
@@ -24,6 +25,13 @@ import '~/styles/prebuilt/apply-colors.css';
 
 const isDev = process.env.NODE_ENV === 'development';
 
+// define fonts
+const lato = Lato({
+  weight: ['400', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  display: 'swap',
+});
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
@@ -57,9 +65,16 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
   const getLayout = Component.getLayout ?? (page => page);
 
   return (
-    <SWRConfig value={swrGlobalConfiguration}>
-      {getLayout(<Component {...pageProps} />)}
-    </SWRConfig>
+    <>
+      <style jsx global>{`
+        :root {
+          --font-family-sans-serif: ${lato.style.fontFamily};
+        }
+      `}</style>
+      <SWRConfig value={swrGlobalConfiguration}>
+        {getLayout(<Component {...pageProps} />)}
+      </SWRConfig>
+    </>
   );
 }
 

apps/app/src/styles/bootstrap/_variables.scss

@@ -71,7 +71,7 @@ $container-max-widths: (
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+$font-family-sans-serif: var(--font-family-sans-serif);
 $font-family-serif: Georgia, 'Times New Roman', Times, serif;
 $font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 $font-family-base: $font-family-sans-serif;

apps/app/src/styles/style-app.scss

@@ -17,7 +17,7 @@
 // // growi component
 // @import 'draft';
 @import 'editor';
-@import 'fonts';
+// @import 'fonts';
 @import 'layout';
 @import 'mirror_mode';
 @import 'modal';

packages/preset-themes/src/styles/bootstrap/_variables.scss

@@ -71,7 +71,7 @@ $container-max-widths: (
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+$font-family-sans-serif: var(--font-family-sans-serif);
 $font-family-serif: Georgia, 'Times New Roman', Times, serif;
 $font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 $font-family-base: $font-family-sans-serif;