fix(ui): Font of post content not following config

* Override the default font set of NotionRenderer * Define a wider font family Close craigary#299
wingboy · Mar 30, 2023 · 58bbd6f · 58bbd6f
1 parent 7c2a83d
commit 58bbd6f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 15 deletions.
diff --git a/components/NotionRenderer.js b/components/NotionRenderer.js
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic'
 import { NotionRenderer as Renderer } from 'react-notion-x'
+import BLOG from '@/blog.config'
+import tailwindConfig from '@/tailwind.config'
 
 // Lazy-load some heavy components
 const components = {
@@ -76,11 +78,25 @@ const mapPageUrl = id => `https://www.notion.so/${id.replace(/-/g, '')}`
  * @param props - Anything that react-notion-x/NotionRenderer supports
  */
 export default function NotionRenderer (props) {
+  const font = {
+    'sans-serif': tailwindConfig.theme.extend.fontFamily.sans,
+    'serif': tailwindConfig.theme.extend.fontFamily.serif
+  }[BLOG.font]
+
   return (
-    <Renderer
-      components={components}
-      mapPageUrl={mapPageUrl}
-      {...props}
-    />
+    <>
+      <style jsx global>
+        {`
+        .notion {
+          --notion-font: ${font};
+        }
+        `}
+      </style>
+      <Renderer
+        components={components}
+        mapPageUrl={mapPageUrl}
+        {...props}
+      />
+    </>
   )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,12 +1,4 @@
 const BLOG = require('./blog.config')
-const { fontFamily } = require('tailwindcss/defaultTheme')
-const CJK = require('./lib/cjk')
-const fontSansCJK = !CJK()
-  ? []
-  : [`"Noto Sans CJK ${CJK()}"`, `"Noto Sans ${CJK()}"`]
-const fontSerifCJK = !CJK()
-  ? []
-  : [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
 
 module.exports = {
   content: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js'],
@@ -22,8 +14,57 @@ module.exports = {
         }
       },
       fontFamily: {
-        sans: ['"IBM Plex Sans"', ...fontFamily.sans, ...fontSansCJK],
-        serif: ['"Source Serif"', ...fontFamily.serif, ...fontSerifCJK],
+        sans: [
+          '"IBM Plex Sans"',
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          '"Noto Sans"',
+          '"Helvetica Neue"',
+          'Helvetica',
+          '"Nimbus Sans L"',
+          'Arial',
+          '"Liberation Sans"',
+          '"PingFang SC"',
+          '"Hiragino Sans GB"',
+          '"Noto Sans CJK SC"',
+          '"Source Han Sans SC"',
+          '"Source Han Sans CN"',
+          '"Microsoft YaHei"',
+          '"Wenquanyi Micro Hei"',
+          '"WenQuanYi Zen Hei"',
+          '"ST Heiti"',
+          'SimHei',
+          '"WenQuanYi Zen Hei Sharp"',
+          'sans-serif'
+        ],
+        serif: [
+          '"Source Serif"',
+          'ui-serif',
+          'Georgia',
+          '"Nimbus Roman No9 L"',
+          '"Songti SC"',
+          '"Noto Serif CJK SC"',
+          '"Source Han Serif SC"',
+          '"Source Han Serif CN"',
+          'STSong',
+          '"AR PL New Sung"',
+          '"AR PL SungtiL GB"',
+          'NSimSun',
+          'SimSun',
+          '"TW-Sung"',
+          '"WenQuanYi Bitmap Song"',
+          '"AR PL UMing CN"',
+          '"AR PL UMing HK"',
+          '"AR PL UMing TW"',
+          '"AR PL UMing TW MBE"',
+          'PMingLiU',
+          'MingLiU',
+          'serif'
+        ],
         noEmoji: [
           '"IBM Plex Sans"',
           'ui-sans-serif',