Merge pull request #3902 from udecode/feat/font-fallback

font fallback
udecode · Dec 21, 2024 · af4e439 · af4e439
2 parents 775edae + 7c96d5d
commit af4e439
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 11 deletions.
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,46 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2024 #17
 
+### December 21 #17.4
+
+Update `tailwind.config.cjs` for better font support in the HTML export:
+
+```ts
+fontFamily: {
+  heading: [
+    'var(--font-heading)',
+    'ui-sans-serif',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'Segoe UI Variable Display',
+    'Segoe UI',
+    'Helvetica',
+    'Apple Color Emoji',
+    'Arial',
+    'sans-serif',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji',
+  ],
+  mono: ['var(--font-mono)', ...fontFamily.mono],
+  sans: [
+    'var(--font-sans)',
+    'ui-sans-serif',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'Segoe UI Variable Display',
+    'Segoe UI',
+    'Helvetica',
+    'Apple Color Emoji',
+    'Arial',
+    'sans-serif',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji',
+  ],
+```
+
+
 ### December 20 #17.3
 
 - `insertColumnGroup`, `toggleColumnGroup`: use `columns` option instead of `layout` 

diff --git a/apps/www/public/r/styles/default/export-toolbar-button.json b/apps/www/public/r/styles/default/export-toolbar-button.json
diff --git a/apps/www/public/r/styles/default/index.json b/apps/www/public/r/styles/default/index.json
@@ -23,6 +23,42 @@
       ],
       "theme": {
         "extend": {
+          "fontFamily": {
+            "heading": [
+              "var(--font-heading)",
+              "ui-sans-serif",
+              "-apple-system",
+              "BlinkMacSystemFont",
+              "Segoe UI Variable Display",
+              "Segoe UI",
+              "Helvetica",
+              "Apple Color Emoji",
+              "Arial",
+              "sans-serif",
+              "Segoe UI Emoji",
+              "Segoe UI Symbol",
+              "Noto Color Emoji"
+            ],
+            "mono": [
+              "var(--font-mono)",
+              "...require(\"tailwindcss/defaultTheme\").fontFamily.mono"
+            ],
+            "sans": [
+              "var(--font-sans)",
+              "ui-sans-serif",
+              "-apple-system",
+              "BlinkMacSystemFont",
+              "Segoe UI Variable Display",
+              "Segoe UI",
+              "Helvetica",
+              "Apple Color Emoji",
+              "Arial",
+              "sans-serif",
+              "Segoe UI Emoji",
+              "Segoe UI Symbol",
+              "Noto Color Emoji"
+            ]
+          },
           "colors": {
             "brand": {
               "DEFAULT": "hsl(var(--brand))",

diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
@@ -527,6 +527,39 @@ async function buildStylesIndex() {
           plugins: [`require("tailwindcss-animate")`, `require("tailwind-scrollbar-hide")`],
           theme: {
             extend: {
+              fontFamily: {
+                heading: [
+                  'var(--font-heading)',
+                  'ui-sans-serif',
+                  '-apple-system',
+                  'BlinkMacSystemFont',
+                  'Segoe UI Variable Display',
+                  'Segoe UI',
+                  'Helvetica',
+                  'Apple Color Emoji',
+                  'Arial',
+                  'sans-serif',
+                  'Segoe UI Emoji',
+                  'Segoe UI Symbol',
+                  'Noto Color Emoji',
+                ],
+                mono: ['var(--font-mono)', `...require("tailwindcss/defaultTheme").fontFamily.mono`],
+                sans: [
+                  'var(--font-sans)',
+                  'ui-sans-serif',
+                  '-apple-system',
+                  'BlinkMacSystemFont',
+                  'Segoe UI Variable Display',
+                  'Segoe UI',
+                  'Helvetica',
+                  'Apple Color Emoji',
+                  'Arial',
+                  'sans-serif',
+                  'Segoe UI Emoji',
+                  'Segoe UI Symbol',
+                  'Noto Color Emoji',
+                ],
+              },
               colors: {
                 brand: {
                   DEFAULT: 'hsl(var(--brand))',

diff --git a/apps/www/src/registry/default/lib/create-html-document.ts b/apps/www/src/registry/default/lib/create-html-document.ts
@@ -20,13 +20,13 @@ export function createHtmlDocument({
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap"
       rel="stylesheet"
     />
     <style>
       :root {
-        --font-sans: 'Inter', sans-serif;
-        --font-mono: 'JetBrains Mono', monospace;
+        --font-sans: 'Inter', 'Inter Fallback';
+        --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
       }
     </style>
   </head>

diff --git a/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx
@@ -332,15 +332,15 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap"
           rel="stylesheet"
         />
         ${tailwindCss}
         ${prismCss}
         <style>
           :root {
-            --font-sans: 'Inter', sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
+            --font-sans: 'Inter', 'Inter Fallback';
+            --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
           }
         </style>
       </head>

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,4 +1,3 @@
-const { fontFamily } = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
@@ -86,9 +85,40 @@ module.exports = {
         },
       },
       fontFamily: {
-        heading: ['var(--font-heading)', ...fontFamily.sans],
-        mono: ['var(--font-mono)', ...fontFamily.mono],
-        sans: ['var(--font-sans)', ...fontFamily.sans],
+        heading: [
+          'var(--font-heading)',
+          'ui-sans-serif',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI Variable Display',
+          'Segoe UI',
+          'Helvetica',
+          'Apple Color Emoji',
+          'Arial',
+          'sans-serif',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
+        mono: [
+          'var(--font-mono)',
+          ...require('tailwindcss/defaultTheme').fontFamily.mono,
+        ],
+        sans: [
+          'var(--font-sans)',
+          'ui-sans-serif',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI Variable Display',
+          'Segoe UI',
+          'Helvetica',
+          'Apple Color Emoji',
+          'Arial',
+          'sans-serif',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
       },
       keyframes: {
         'accordion-down': {