fix: font family overrides (#3485)

src/lib/components/Widget.tsx

@@ -40,10 +40,10 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
 
   * {
     box-sizing: border-box;
-    font-family: ${({ theme }) => theme.fontFamily};
+    font-family: ${({ theme }) => (typeof theme.fontFamily === 'string' ? theme.fontFamily : theme.fontFamily.font)};
 
     @supports (font-variation-settings: normal) {
-      font-family: ${({ theme }) => theme.fontFamilyVariable};
+      font-family: ${({ theme }) => (typeof theme.fontFamily === 'string' ? undefined : theme.fontFamily.variable)};
     }
   }
 `

src/lib/theme/index.tsx

@@ -73,8 +73,10 @@ export const darkTheme: Colors = {
 
 export const defaultTheme = {
   borderRadius: 1,
-  fontFamily: '"Inter", sans-serif',
-  fontFamilyVariable: '"InterVariable", sans-serif',
+  fontFamily: {
+    font: '"Inter", sans-serif',
+    variable: '"InterVariable", sans-serif',
+  },
   fontFamilyCode: 'IBM Plex Mono',
   tokenColorExtraction: false,
   ...lightTheme,

src/lib/theme/theme.ts

@@ -27,8 +27,12 @@ export type Color = keyof Colors
 
 export interface Attributes {
   borderRadius: boolean | number
-  fontFamily: string
-  fontFamilyVariable: string
+  fontFamily:
+    | string
+    | {
+        font: string
+        variable: string
+      }
   fontFamilyCode: string
   tokenColorExtraction: boolean
 }