Feature - New Font Usage (Inter) and Dynamic Font Handling

docs/src/lib/components/ThemeCustomizer.svelte

@@ -81,31 +81,35 @@
  '--w3o-text-color': 'unset',
  '--w3o-border-color': 'unset',
  '--w3o-action-color': 'unset',
- '--w3o-border-radius': 'unset'
+ '--w3o-border-radius': 'unset',
+ '--w3o-font-family': 'unset'
  },
  custom: {
  '--w3o-background-color': 'unset',
  '--w3o-foreground-color': 'unset',
  '--w3o-text-color': 'unset',
  '--w3o-border-color': 'unset',
  '--w3o-action-color': 'unset',
- '--w3o-border-radius': 'unset'
+ '--w3o-border-radius': 'unset',
+ '--w3o-font-family': 'unset'
  },
  light: {
  '--w3o-background-color': '#ffffff',
  '--w3o-foreground-color': '#EFF1FC',
  '--w3o-text-color': '#1a1d26',
  '--w3o-border-color': '#d0d4f7',
  '--w3o-action-color': '#6370E5',
- '--w3o-border-radius': '16px'
+ '--w3o-border-radius': '16px',
+ '--w3o-font-family': 'unset'
  },
  dark: {
  '--w3o-background-color': '#1A1D26',
  '--w3o-foreground-color': '#242835',
  '--w3o-text-color': '#EFF1FC',
  '--w3o-border-color': '#33394B',
  '--w3o-action-color': '#929bed',
- '--w3o-border-radius': '16px'
+ '--w3o-border-radius': '16px',
+ '--w3o-font-family': 'unset'
  }
  }
 

docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md

@@ -127,9 +127,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
  --onboard-action-required-modal-background
 
  /* FONTS */
- --onboard-font-family-normal: Sofia Pro;
- --onboard-font-family-semibold: Sofia Pro Semibold;
- --onboard-font-family-light: Sofia Pro Light;
+ --onboard-font-family-normal: Inter, sans-serif;
 
  --onboard-font-size-1: 3rem;
  --onboard-font-size-2: 2.25rem;
@@ -197,8 +195,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
  --account-select-modal-danger-500: #ff4f4f;
 
  /* FONTS */
- --account-select-modal-font-family-normal: Sofia Pro;
- --account-select-modal-font-family-light: Sofia Pro Light;
+ --account-select-modal-font-family-normal: Inter, sans-serif;
  --account-select-modal-font-size-5: 1rem;
  --account-select-modal-font-size-7: .75rem;
  --account-select-modal-font-line-height-1: 24px;

docs/src/routes/docs/[...3]modules/core.md

@@ -90,10 +90,18 @@ type InitOptions {
  * Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
  */
  containerElements?: Partial<ContainerElements>
-  /**
+ /**
  * Custom or predefined theme for Web3Onboard i.e. default, dark, Custom, etc.
  */
  theme?: Theme
+ /**
+ * Defaults to False
+ * If set to true the Inter font will not be imported and
+ * instead the default 'sans-serif' font will be used
+ * To define the font used see `--w3o-font-family` prop within
+ * the Theme initialization object or set as css variable
+ */
+ disableFontDownload?: boolean
 }
 
 ```
@@ -264,6 +272,7 @@ export type BuiltInThemes = 'default' | 'dark' | 'light'
 
 export type ThemingMap = {
  '--w3o-background-color'?: string
+ '--w3o-font-family'?: string
  '--w3o-foreground-color'?: string
  '--w3o-text-color'?: string
  '--w3o-border-color'?: string
@@ -282,6 +291,17 @@ It will allow you to customize the look and feel of web3-onboard, try different
 
 ---
 
+#### disableFontDownload
+
+If set to `true` the default `Inter` font will not be imported and instead the web based `sans-serif` font will be used if a font is not defined through the `Theme` or exposed css variable.
+To define the font use `--w3o-font-family` prop within the `Theme` initialization object or set as a css variable.
+
+```typescript
+type disableFontDownload = boolean // defaults to false
+```
+
+---
+
 #### accountCenter
 
 An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices.
@@ -1102,9 +1122,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
  --onboard-action-required-modal-background
 
  /* FONTS */
- --onboard-font-family-normal: Sofia Pro;
- --onboard-font-family-semibold: Sofia Pro Semibold;
- --onboard-font-family-light: Sofia Pro Light;
+ --onboard-font-family-normal: Inter, sans-serif;
 
  --onboard-font-size-1: 3rem;
  --onboard-font-size-2: 2.25rem;
@@ -1172,8 +1190,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
  --account-select-modal-danger-500: #ff4f4f;
 
  /* FONTS */
- --account-select-modal-font-family-normal: Sofia Pro;
- --account-select-modal-font-family-light: Sofia Pro Light;
+ --account-select-modal-font-family-normal: Inter, sans-serif;
  --account-select-modal-font-size-5: 1rem;
  --account-select-modal-font-size-7: .75rem;
  --account-select-modal-font-line-height-1: 24px;

docs/src/routes/docs/[...4]wallets/magic.md

@@ -102,8 +102,7 @@ The Magic Wallet Login styles can customized via [CSS variables](https://develop
  --login-modal-danger-500: #ff4f4f;
 
  /* FONTS */
- --login-modal-font-family-normal: Sofia Pro;
- --login-modal-font-family-light: Sofia Pro Light;
+ --login-modal-font-family-normal: Inter, sans-serif;
  --login-modal-font-size-5: 1rem;
  --login-modal-font-line-height-1: 24px;