A dynamically loaded font family input
The Font Family control supports a growing set of typefaces, including the entire
Google Fonts library as well as a catalog of system fonts.
Style sheet links are
generated automatically with styled. Variable fonts are fully supported. Select any variable font to expose the axis' for that font.
Fun with fonts!
import { useState } from 'react'
import { FontFamilyInput, styled } from '@compai/css-gui'
const MyEditor = () => {
const [styles, setStyles] = useState({ fontFamily: 'Abel' })
return (
<>
<styled.p styles={styles}>Fun with fonts!</styled.p>
<FontFamilyInput value={styles} onChange={setStyles} />
</>
)
}