Merge pull request #7633 from weseek/imprv/optimize-fonts

imprv: Optimize fonts with next/font

.gitattributes

@@ -1 +1,2 @@
 *.gz filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text

apps/app/resource/fonts/PressStart2P-latin.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:965686370a3ddd3956adc0cf955459e32492373fd552ca94338cf8e2a2c932ea
+size 12440

apps/app/resource/fonts/SourceHanCodeJP-Regular.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4b582d043b48510614205db1f1bc1519a70acbe0d89f53843e9131fe7f655b8
+size 3333108

apps/app/src/components/PageEditor/CodeMirrorEditor.module.scss

@@ -12,6 +12,8 @@
   @import '~codemirror/theme/eclipse';
 
   .CodeMirror {
+    font-family: var(--font-family-monospace);
+
     pre.CodeMirror-line.grw-cm-header-line {
       padding-top: 0.16em;
       padding-bottom: 0.08em;
@@ -97,7 +99,7 @@
       .card-body {
         min-width: 30em;
         padding-bottom: 0;
-        font-family: monospace;
+        font-family: var(--font-family-monospace);
         color: bs.$text-muted;
       }
       ul > li {

apps/app/src/components/PageEditor/DrawioModal.tsx

@@ -20,7 +20,7 @@ import { type DrawioConfig, DrawioCommunicationHelper } from './DrawioCommunicat
 const logger = loggerFactory('growi:components:DrawioModal');
 
 const headerColor = '#334455';
-const fontFamily = "Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif";
+const fontFamily = "-apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif";
 
 const drawioConfig: DrawioConfig = {
   css: `
@@ -32,7 +32,7 @@ const drawioConfig: DrawioConfig = {
     font-size: 8pt !important;
   }
   `,
-  customFonts: ['Lato', 'Charter'],
+  customFonts: ['Charter'],
   compressXml: true,
 };
 

apps/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -7,6 +7,14 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import styles from './CodeBlock.module.scss';
 
 
+// remove font-family
+Object.entries<object>(oneDark).forEach(([key, value]) => {
+  if ('fontFamily' in value) {
+    delete oneDark[key].fontFamily;
+  }
+});
+
+
 function extractChildrenToIgnoreReactNode(children: ReactNode): ReactNode {
 
   if (children == null) {

apps/app/src/components/StaffCredit/StaffCredit.module.scss

@@ -36,7 +36,6 @@
   h6,
   .dev-position,
   .dev-name {
-    font-family: 'Press Start 2P', Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
     color: white;
   }
 

apps/app/src/components/StaffCredit/StaffCredit.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
+import localFont from 'next/font/local';
 import { animateScroll } from 'react-scroll';
 import {
   Modal, ModalBody,
@@ -16,6 +17,13 @@ import styles from './StaffCredit.module.scss';
 const logger = loggerFactory('growi:cli:StaffCredit');
 
 
+// define fonts
+const pressStart2P = localFont({
+  src: '../../../resource/fonts/PressStart2P-latin.woff2',
+  display: 'block',
+});
+
+
 type Props = {
   onClosed?: () => void,
 }
@@ -124,7 +132,7 @@ const StaffCredit = (props: Props): JSX.Element => {
       isOpen={isLoaded}
       toggle={closeHandler}
       scrollable
-      className={`staff-credit ${styles['staff-credit']}`}
+      className={`staff-credit ${styles['staff-credit']} ${pressStart2P.className}`}
       onOpened={openedHandler}
     >
       <ModalBody id="modalBody" className="credit-curtain">

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

@@ -3,6 +3,8 @@ 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 localFont from 'next/font/local';
 import { SWRConfig } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
@@ -24,6 +26,14 @@ 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',
+});
+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> & {
@@ -57,9 +67,18 @@ 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}, -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}>
+        {getLayout(<Component {...pageProps} />)}
+      </SWRConfig>
+    </>
   );
 }
 

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/_fonts.scss

@@ -1,49 +0,0 @@
-// Press Start 2P
-@font-face {
-  font-family: 'Press Start 2P';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/static/fonts/PressStart2P-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: 'Press Start 2P';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/static/fonts/PressStart2P-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-// Lato
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/static/fonts/Lato-Regular-latin-ext.woff2') format('woff2');
-  font-display: swap;
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/static/fonts/Lato-Regular-latin.woff2') format('woff2');
-  font-display: swap;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/static/fonts/Lato-Bold-latin-ext.woff2') format('woff2');
-  font-display: swap;
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/static/fonts/Lato-Bold-latin.woff2') format('woff2');
-  font-display: swap;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

apps/app/src/styles/_variables.scss

@@ -9,8 +9,6 @@ $grw-marker-blue: #6cf;
 $grw-marker-cyan: #6ff;
 $grw-marker-green: #6f6;
 
-$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
-
 //== Layout
 $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3.3333px;

apps/app/src/styles/atoms/_code.scss

@@ -6,7 +6,6 @@
  */
 code:not([class^='language-']) {
   padding: 2px 4px;
-  font-family: var.$font-family-monospace-not-strictly;
   border: 1px solid;
   border-radius: bs.$border-radius;
 }

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

@@ -71,9 +71,9 @@ $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-serif: Georgia, 'Times New Roman', Times, serif;
-$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+$font-family-sans-serif: var(--font-family-sans-serif);
+$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

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

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

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

@@ -9,8 +9,6 @@ $grw-marker-blue: #6cf;
 $grw-marker-cyan: #6ff;
 $grw-marker-green: #6f6;
 
-$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
-
 //== Layout
 $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3.3333px;

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

@@ -71,9 +71,9 @@ $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-serif: Georgia, 'Times New Roman', Times, serif;
-$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+$font-family-sans-serif: var(--font-family-sans-serif);
+$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