CSS GUIv0.0.246DocsPropertiesGitHubLog inSign up

Font Family

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.

Example

Fun with fonts!

Add property
Add pseudo element or class

Usage

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