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

[Adamj1232]

Description

Notion card with stats and pictures

• Removing Sofia semi-bold: 53kb from baseline
• Sofia -> Inter variable: 83kb from baseline minus Sofia semi-bold
• Custom font or use web font: 228b from default with Inter

Option to define a font through either the new theme property --w3o-font-family or the legacy css font var --onboard-font-family-normal

Or set useWebFont to true and use the default fallback sans-serif font by setting

Type changes:

Add '--w3o-font-family' Theme prop:

type ThemingMap = {
  '--w3o-background-color'?: string
  '--w3o-font-family'?: string
  '--w3o-foreground-color'?: string
  '--w3o-text-color'?: string
  '--w3o-border-color'?: string
  '--w3o-action-color'?: string
  '--w3o-border-radius'?: string
}

Add useWebFont boolean prop to init options:

interface InitOptions {
   .....

  /**
   * 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
}

Checklist

• Increment the version field in package.json of the package you have made changes in following semantic versioning and using alpha release tagging
• Check the box that allows repo maintainers to update this PR
• Test locally to make sure this feature/fix works
• Run yarn check-all to confirm there are not any associated errors
• Confirm this PR passes Circle CI checks
• Add or update relevant information in the documentation

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
web3-onboard-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 24, 2023 at 5:16PM (UTC)

[lnbc1QWFyb24]

Just a console log to be removed and a question around the check if a font has been defined.

Also where is the dynamic loading occurring? It all looks like it is imported regardless of configuration from what I can tell?

[Adamj1232]

Refactored and moved to the CDN approach as recommended.
Dynamic importing can be seen in a few places, within Core it is now here

[lnbc1QWFyb24]

Looks good!

[leightkt]

Tested in the demo with useWebFont: true and passing custom font via --w3o-font-family