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.


Fun with fonts!

Add property
Add pseudo element or class


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