refactor and using cdn for inter

packages/common/src/index.ts

@@ -1,6 +1,6 @@
 export { ProviderRpcError } from './errors.js'
 export { createEIP1193Provider } from './eip-1193.js'
-export { InterSemiBold, InterRegular } from './fonts.js'
+export { InterVar } from './fonts.js'
 export { weiToEth } from './utils.js'
 
 export * from './types.js'

packages/core/src/index.ts

@@ -96,7 +96,8 @@ function init(options: InitOptions): OnboardAPI {
     connect,
     containerElements,
     transactionPreview,
-    theme
+    theme,
+    useWebFont
   } = options
 
   if (containerElements) updateConfiguration({ containerElements })
@@ -196,7 +197,7 @@ function init(options: InitOptions): OnboardAPI {
     updateNotify(notifyUpdate)
   }
 
-  const app = svelteInstance || mountApp(theme)
+  const app = svelteInstance || mountApp(theme, useWebFont)
 
   updateConfiguration({
     appMetadata,
@@ -240,33 +241,37 @@ function init(options: InitOptions): OnboardAPI {
   return API
 }
 
-const fontFamilyExternallyDefined = (theme: Theme): boolean => {
+const fontFamilyExternallyDefined = (
+  theme: Theme,
+  useWebFont: boolean
+): boolean => {
+  if (useWebFont) return true
   if (
     document.body &&
-    getComputedStyle(document.body).getPropertyValue(
+    (getComputedStyle(document.body).getPropertyValue(
       '--onboard-font-family-normal'
-    )
+    ) ||
+      getComputedStyle(document.body).getPropertyValue('--w3o-font-family'))
   )
     return true
   if (!theme) return false
   if (typeof theme === 'object' && theme['--w3o-font-family']) return true
   return false
 }
 
-const importFontsToDoc = async (): Promise<void> => {
-  const { InterRegular, InterSemiBold } = await import('@web3-onboard/common')
+const importInterFont = async (): Promise<void> => {
+  const { InterVar } = await import('@web3-onboard/common')
   // Add Fonts to main page
   const styleEl = document.createElement('style')
 
   styleEl.innerHTML = `
-    ${InterRegular}
-    ${InterSemiBold}
+    ${InterVar}
   `
 
   document.body.appendChild(styleEl)
 }
 
-function mountApp(theme: Theme) {
+function mountApp(theme: Theme, useWebFont: boolean) {
   class Onboard extends HTMLElement {
     constructor() {
       super()
@@ -277,8 +282,8 @@ function mountApp(theme: Theme) {
     customElements.define('onboard-v2', Onboard)
   }
 
-  if (!fontFamilyExternallyDefined(theme)) {
-    importFontsToDoc()
+  if (!fontFamilyExternallyDefined(theme, useWebFont)) {
+    importInterFont()
   }
 
   // add to DOM

packages/core/src/types.ts

@@ -69,6 +69,14 @@ export interface InitOptions {
    * or customize with a ThemingMap object.
    */
   theme?: Theme
+  /**
+   * Defaults to False - use to reduce load time
+   * 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
+   */
+  useWebFont?: boolean
 }
 
 export type Theme = ThemingMap | BuiltInThemes | 'system'

packages/core/src/validation.ts

@@ -219,7 +219,8 @@ const initOptions = Joi.object({
     init: Joi.function().required(),
     previewTransaction: Joi.function()
   }),
-  theme: theme
+  theme: theme,
+  useWebFont: Joi.boolean()
 })
 
 const connectOptions = Joi.object({

packages/demo/public/global.css

@@ -1,3 +1,6 @@
+:root {
+  --onboard-font-family-normal: cursive;
+}
 html,
 body {
   position: relative;

packages/hw-common/src/account-select.ts

@@ -1,5 +1,4 @@
 import { firstValueFrom, Subject, take } from 'rxjs'
-import { InterRegular, InterSemiBold } from '@web3-onboard/common'
 import AccountSelect from './views/AccountSelect.svelte'
 import { accounts$ } from './streams.js'
 import { validateSelectAccountOptions } from './validation.js'
@@ -39,6 +38,18 @@ const fontFamilyExternallyDefined = (): boolean => {
   return false
 }
 
+const importInterFont = async (): Promise<void> => {
+  const { InterVar } = await import('@web3-onboard/common')
+  // Add Fonts to main page
+  const styleEl = document.createElement('style')
+
+  styleEl.innerHTML = `
+    ${InterVar}
+  `
+
+  document.body.appendChild(styleEl)
+}
+
 // eslint-disable-next-line max-len
 const mountAccountSelect = (
   selectAccountOptions: SelectAccountOptions,
@@ -54,15 +65,7 @@ const mountAccountSelect = (
     customElements.define('account-select', AccountSelectEl)
   }
   if (!fontFamilyExternallyDefined()) {
-    // Add Fonts to main page
-    const styleEl = document.createElement('style')
-
-    styleEl.innerHTML = `
-    ${InterRegular}
-    ${InterSemiBold}
-  `
-
-    document.body.appendChild(styleEl)
+    importInterFont()
   }
 
   // add to DOM
@@ -90,7 +93,7 @@ const mountAccountSelect = (
         --danger-500: #ff4f4f;
 
         /* FONTS */
-        --font-family-normal: Inter, sans-serif;
+        --font-family-normal: var(--w3o-font-family, Inter, sans-serif);
         --font-size-5: 1rem;
         --font-size-6: .875rem;
         --font-size-7: .75rem;

packages/magic/src/login-modal.ts

@@ -1,7 +1,6 @@
 import { firstValueFrom, Subject, take } from 'rxjs'
 import LoginModal from './view/LoginModal.svelte'
 import { loggedIn$ } from './streams.js'
-import { InterRegular, InterSemiBold } from '@web3-onboard/common'
 import type { LoginOptions } from './types.js'
 
 // eslint-disable-next-line max-len
@@ -37,6 +36,18 @@ const fontFamilyExternallyDefined = (): boolean => {
   return false
 }
 
+const importInterFont = async (): Promise<void> => {
+  const { InterVar } = await import('@web3-onboard/common')
+  // Add Fonts to main page
+  const styleEl = document.createElement('style')
+
+  styleEl.innerHTML = `
+    ${InterVar}
+  `
+
+  document.body.appendChild(styleEl)
+}
+
 // eslint-disable-next-line max-len
 const mountLoginModal = (
   loginOptions: LoginOptions,
@@ -53,15 +64,7 @@ const mountLoginModal = (
   }
 
   if (!fontFamilyExternallyDefined()) {
-    // Add Fonts to main page
-    const styleEl = document.createElement('style')
-
-    styleEl.innerHTML = `
-    ${InterRegular}
-    ${InterSemiBold}
-  `
-
-    document.body.appendChild(styleEl)
+    importInterFont()
   }
 
   // add to DOM
@@ -85,7 +88,7 @@ const mountLoginModal = (
         --danger-500: #ff4f4f;
 
         /* FONTS */
-        --font-family-normal: Inter, sans-serif;
+        --font-family-normal: var(--w3o-font-family, Inter, sans-serif);
 
         --font-size-5: 1rem;
         --font-line-height-1: 24px;

packages/transaction-preview/src/index.ts

@@ -1,9 +1,7 @@
 import { firstValueFrom, Subject } from 'rxjs'
 import {
   ProviderRpcError,
-  ProviderRpcErrorCode,
-  InterRegular,
-  InterSemiBold
+  ProviderRpcErrorCode
 } from '@web3-onboard/common'
 import type {
   PatchedEIP1193Provider,
@@ -253,6 +251,18 @@ const fontFamilyExternallyDefined = (): boolean => {
   return false
 }
 
+const importFontsToDoc = async (): Promise<void> => {
+  const { InterVar } = await import('@web3-onboard/common')
+  // Add Fonts to main page
+  const styleEl = document.createElement('style')
+
+  styleEl.innerHTML = `
+    ${InterVar}
+  `
+
+  document.body.appendChild(styleEl)
+}
+
 const mountTransactionPreview = (simResponse: MultiSimOutput) => {
   class TransactionPreviewEl extends HTMLElement {
     constructor() {
@@ -265,15 +275,7 @@ const mountTransactionPreview = (simResponse: MultiSimOutput) => {
   }
 
   if (!fontFamilyExternallyDefined()) {
-    // Add Fonts to main page
-    const styleEl = document.createElement('style')
-
-    styleEl.innerHTML = `
-    ${InterRegular}
-    ${InterSemiBold}
-  `
-
-    document.body.appendChild(styleEl)
+    importFontsToDoc()
   }
 
   // add to DOM

packages/transaction-preview/src/views/Index.svelte

@@ -29,7 +29,7 @@
 <style>
   :host {
     /* Component Variables */
-    --font-family-normal: Sofia Pro;
+    --font-family-normal: var(--w3o-font-family, Inter, sans-serif);
     --font-size-4: 1.25rem;
     --font-size-5: 1rem;
     --font-size-6: 0.875rem;