set --font-family-* in _app.page.tsx

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

@@ -4,6 +4,7 @@ import { NextPage } from 'next';
 import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import { Lato } from 'next/font/google';
+import localFont from 'next/font/local';
 import { SWRConfig } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
@@ -32,6 +33,7 @@ const lato = Lato({
   subsets: ['latin'],
   display: 'swap',
 });
+const sourceHanCodeJP = localFont({ src: '../../resource/fonts/SourceHanCodeJP-Regular.woff2' });
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
@@ -68,7 +70,9 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
     <>
       <style jsx global>{`
         :root {
-          --font-family-sans-serif: ${lato.style.fontFamily};
+          --font-family-sans-serif: ${lato.style.fontFamily} -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+          --font-family-serif: Georgia, 'Times New Roman', Times, serif;
+          --font-family-monospace: monospace, ${sourceHanCodeJP.style.fontFamily};
         }
       `}</style>
       <SWRConfig value={swrGlobalConfiguration}>

apps/app/src/styles/_editor.scss

@@ -207,7 +207,7 @@
       }
 
       .textarea-editor {
-        font-family: monospace;
+        font-family: var(--font-family-monospace);
         border: none;
       }
     }

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

@@ -72,8 +72,8 @@ $container-max-widths: (
 //
 //## Font, line-height, and color for body text, headings, and more.
 $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-serif: var(--font-family-serif);
+$font-family-monospace: var(--font-family-monospace);
 $font-family-base: $font-family-sans-serif;
 
 $font-size-base: 0.875rem;  // 16px -> 14px

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

@@ -72,8 +72,8 @@ $container-max-widths: (
 //
 //## Font, line-height, and color for body text, headings, and more.
 $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-serif: var(--font-family-serif);
+$font-family-monospace: var(--font-family-monospace);
 $font-family-base: $font-family-sans-serif;
 
 $font-size-base: 0.875rem;  // 16px -> 14px