fix(editor): Reset styles, include Karla fonts in the editor package

serlo · Dec 20, 2024 · 2712154 · 2712154
1 parent c9628ad
commit 2712154
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 5 deletions.
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
@@ -32,10 +32,6 @@ export default {
         '100%': '100% 100%',
       },
       maxWidth: { xs: '300px' },
-      fontFamily: {
-        serlo: 'Karla, sans-serif',
-        handwritten: 'Caveat, sans-serif',
-      },
     },
   },
 }

diff --git a/packages/editor/src/core/editor.tsx b/packages/editor/src/core/editor.tsx
@@ -54,7 +54,9 @@ export function Editor(props: EditorProps) {
           {!isSerlo ? <Toaster /> : null}
           <div
             className={cn(
-              'editor-core mb-24 text-lg leading-cozy',
+              // editor-core resets styles
+              'editor-core',
+              'font-serlo mb-24 text-lg leading-cozy',
               // some undocumented style hacks
               '[&_h1]:hyphens-auto',
               '[&_a[data-key]]:hyphens-auto',

diff --git a/packages/editor/src/editor-ui/assets/karla/karla-400.woff2 b/packages/editor/src/editor-ui/assets/karla/karla-400.woff2
diff --git a/packages/editor/src/editor-ui/assets/karla/karla-700.woff2 b/packages/editor/src/editor-ui/assets/karla/karla-700.woff2
diff --git a/packages/editor/src/editor-ui/assets/karla/karla-800.woff2 b/packages/editor/src/editor-ui/assets/karla/karla-800.woff2
diff --git a/packages/editor/src/editor-ui/assets/karla/karla-variable.woff2 b/packages/editor/src/editor-ui/assets/karla/karla-variable.woff2
diff --git a/packages/editor/src/tailwind/editor.css b/packages/editor/src/tailwind/editor.css
@@ -3,8 +3,72 @@
 @import './components.css';
 @import './utilities.css';
 
+/*
+* Reset all styles outside of the editor (trying to prevent style collisions)
+*/
+@layer base {
+  .editor-core {
+    all: initial;
+    display: block;
+  }
+}
+
 /* stop body from scrolling when a modal is open */
 body.ReactModal__Body--open {
   overflow: hidden;
   height: 100vh;
 }
+
+/* fallback for browsers that do not support variable font sizes */
+@supports not (font-variation-settings: normal) {
+  /* generated with https://gwfh.mranftl.com/fonts/karla?subsets=latin */
+  /* using "latin" and widths 400, 600, 800 */
+  @font-face {
+    font-family: 'Karla';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 400;
+    src: url('../editor-ui/assets/karla/karla-400.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'Karla';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 700;
+    src: url('../editor-ui/assets/karla/karla-700.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'Karla';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 800;
+    src: url('../editor-ui/assets/karla/karla-800.woff2') format('woff2');
+  }
+}
+
+/* variable font for modern browsers, all weights: but please stick to 400,700,800 if possible */
+@supports (font-variation-settings: normal) {
+  /* generated with https://variable-font-helper.web.app/ */
+  /* using "latin" */
+  @font-face {
+    font-family: 'Karla';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 400 800;
+    src: url('../editor-ui/assets/karla/karla-variable.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
+      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+}
+
+/* manually optimized */
+/* width 700 */
+
+@font-face {
+  font-family: 'Caveat';
+  font-display: swap;
+  font-style: bold;
+  font-weight: 700;
+  src: url('/_assets/fonts/caveat/caveat-700.woff2') format('woff2');
+}
diff --git a/packages/editor/src/tailwind/tailwind-base.js b/packages/editor/src/tailwind/tailwind-base.js
@@ -21,6 +21,10 @@ const sunflowerColors = {
 export default {
   theme: {
     extend: {
+      fontFamily: {
+        serlo: 'Karla, sans-serif',
+        handwritten: 'Caveat, sans-serif',
+      },
       colors: {
         brand: {
           DEFAULT: brand,