Fixes font issues with Recursive

components/canvas/context-menu/context-menu.tsx

@@ -263,11 +263,13 @@ const StyledContent = styled(_ContextMenu.Content, {
   padding: 3,
   boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
   minWidth: 128,
+  font: '$ui',
 
   '& kbd': {
     marginLeft: '32px',
     fontSize: '$1',
     fontFamily: '$ui',
+    fontWeight: 400,
   },
 
   '& kbd > span': {

components/code-panel/code-docs.tsx

@@ -96,7 +96,7 @@ const StyledDocs = styled('div', {
 
   '& pre': {
     border: '1px solid $brushStroke',
-    font: '$ui',
+    font: '$mono',
     fontWeight: 420,
     lineHeight: 1.5,
     padding: 16,

components/code-panel/code-editor.tsx

@@ -118,8 +118,7 @@ export default function CodeEditor({
 
     editor.updateOptions({
       fontSize,
-      fontFamily: "'Recursive', monospace",
-      fontWeight: '420',
+      fontFamily: "'Recursive Mono', monospace",
       wordBasedSuggestions: false,
       minimap: { enabled: false },
       lightbulb: {

components/page-panel/page-panel.tsx

@@ -142,6 +142,7 @@ const StyledRadioItem = styled(DropdownMenu.RadioItem, {
   borderRadius: '4px',
   fontSize: '$1',
   fontFamily: '$ui',
+  fontWeight: 400,
   backgroundColor: 'transparent',
   outline: 'none',
   variants: {
@@ -178,6 +179,7 @@ const StyledContextMenuItem = styled(ContextMenu.Item, {
   borderRadius: '4px',
   fontSize: '$1',
   fontFamily: '$ui',
+  fontWeight: 400,
   backgroundColor: 'transparent',
   outline: 'none',
   bp: {

components/panel.tsx

@@ -10,6 +10,7 @@ export const Root = styled('div', {
   zIndex: 200,
   border: '1px solid $panel',
   boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+  font: '$ui',
 
   variants: {
     bp: {

components/shared.tsx

@@ -86,6 +86,7 @@ export const RowButton = styled('button', {
   outline: 'none',
   alignItems: 'center',
   fontFamily: '$ui',
+  fontWeight: 400,
   fontSize: '$1',
   justifyContent: 'space-between',
   padding: '4px 6px 4px 12px',

components/style-panel/style-panel.tsx

@@ -296,8 +296,8 @@ const Row = styled('div', {
 
   '& label': {
     fontFamily: '$ui',
+    fontWeight: 400,
     fontSize: '$1',
-    fontWeight: '$1',
     margin: 0,
     padding: 0,
   },

styles/globals.css

@@ -1,5 +1,30 @@
-@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@500;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Recursive:wght,MONO@420,1&display=swap');
+
+@font-face {
+  font-family: 'Recursive';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.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;
+}
+
+@font-face {
+  font-family: 'Recursive';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.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;
+}
+
+@font-face {
+  font-family: 'Recursive Mono';
+  font-style: normal;
+  font-weight: 420;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUlTGZnI14ZeY.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;
+}
 
 @font-face {
   font-family: 'Verveine Regular';

styles/stitches.config.ts

@@ -37,7 +37,7 @@ const { styled, global, css, theme, getCssString } = createCss({
     fonts: {
       ui: '"Recursive", system-ui, sans-serif',
       body: '"Recursive", system-ui, sans-serif',
-      mono: '"Recursive", monospace',
+      mono: '"Recursive Mono", monospace',
     },
     fontWeights: {},
     lineHeights: {},