FontLanguage

The FontLanguage component works with the Hanzo GUI design system, allowing you to define custom fonts per-language.

Rationale

Before FontLanguage, you could get custom fonts with some effort. Simply create a body font, and a body_french font, and switch it out like so on relevant text components: <Text fontFamily={isFrench ? '$body_french' : '$body'} />.

This would work, but having to update every Text component on page with a conditional would be terribly verbose and slow.

With FontLanguage, you can do:

<FontLanguage body={isFrench ? 'french' : 'default'}>
  <Text fontFamily="$body">Hello world</Text>
</FontLanguage>

Even better, with styled:

const P = styled(Text, { fontFamily: '$body' })

<FontLanguage body={isFrench ? 'french' : 'default'}>
  <P>Hello world</P>
</FontLanguage>

On the web, FontLanguage uses CSS Variables to avoid re-renders even when changing languages.

Usage

In your gui.config.ts, you can add a language variant for any font by adding a suffix with a custom name for that language. Here's a stripped down config showing how you can add the custom _cn suffix for a Chinese language font:

import { createFont, createGui, createTokens } from '@hanzo/gui'

export default createGui({
  fonts: {
    body: createFont({
      family: 'Inter, Helvetica, Arial, sans-serif',
      // ...
    }),
    body_cn: createFont({
      family: 'Inter-CN',
      // ...
    }),
  },
})

You'll then need to load the Inter and Inter-CN fonts for the platforms you support. Once you do, you'll get fully typed support for changing any body font to cn in a component:

import { FontLanguage, Text } from '@hanzo/gui' // or '@hanzogui/core'

export default (
  <FontLanguage body="cn">
    <Text fontFamily="$body">你好</Text>
  </FontLanguage>
)

The name you choose for the suffix is up to you, and Hanzo GUI will treat any font with a _ separator as a language variant.

To reset your font back to your base body font, you can use the reserved key default:

import { FontLanguage, Text } from '@hanzo/gui' // or '@hanzogui/core'

export default (
  <FontLanguage body="cn">
    <Text fontFamily="$body">你好</Text>
    <FontLanguage body="default">
      <Text fontFamily="$body">Hello</Text>
    </FontLanguage>
  </FontLanguage>
)