mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
1620fff61e
The estate renders in Zen, and the config sources here already did — but the surfaces that teach the config had not moved with them. Every createFont example in the docs still named Inter, so a reader copying one out wrote an app in a face we do not ship, and the Expo guide sent them to @hanzogui/font-inter, a package that does not exist in this repo at all; the one that does is @hanzogui/font-zen. The tracked .gui configs and the two public/hanzogui.css files were stale output. The compiler writes .hanzogui/hanzogui.config.json now and the apps emit hanzogui.generated.css, so nothing produced or read either set any more; they had simply frozen in place with the pre-Zen families still in them, and .gitignore had already been taught to ignore .gui without the files being untracked to match. The babel native snapshot recorded fontFamily "Inter" for the same reason. The compiler emits "Zen" today — the snapshot was just never re-run.
83 lines
2.4 KiB
Plaintext
83 lines
2.4 KiB
Plaintext
---
|
|
title: FontLanguage
|
|
description: Using custom fonts for each language
|
|
---
|
|
|
|
The `FontLanguage` component works with the 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:
|
|
|
|
```tsx
|
|
<FontLanguage body={isFrench ? 'french' : 'default'}>
|
|
<Text fontFamily="$body">Hello world</Text>
|
|
</FontLanguage>
|
|
```
|
|
|
|
Even better, with `styled`:
|
|
|
|
```tsx
|
|
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 `hanzogui.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:
|
|
|
|
```tsx
|
|
import { createFont, createGui, createTokens } from '@hanzo/gui'
|
|
|
|
export default createGui({
|
|
fonts: {
|
|
body: createFont({
|
|
family: "'Zen', Helvetica, Arial, sans-serif",
|
|
// ...
|
|
}),
|
|
body_cn: createFont({
|
|
family: 'Zen-CN',
|
|
// ...
|
|
}),
|
|
},
|
|
})
|
|
```
|
|
|
|
You'll then need to load the `Zen` and `Zen-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:
|
|
|
|
```tsx
|
|
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 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`:
|
|
|
|
```tsx
|
|
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>
|
|
)
|
|
```
|