CSS GUIv0.0.61PropertiesGitHub

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!


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