Fontizer

Tiny React component to you manage your website's fonts display

On Github
On NPM

Demo

Click one of the button on the corners

How to use it

Install the package

yarn add fontizer

Prepare your CSS file, by adding these base values to your CSS :root element

--base-font-size: px;
--base-font-weight: ;

Then load Fontizer on your page, it can take 2 props, the position one that will position it. And a callback function that returns the new values in an array [16, 300]

import { Fontizer } from "fontizer";

<Fontizer
  position="bl"
  callback={ value => console.log(`values changed ${value}`)}
  variables={{size: '--foo-bar-size', weight: '--foo-bar-weight'}}
/>

Props table

prop

type

value

default

description

position

string

'bl' | 'br' | 'tl' | 'tr'

bl

corner coordinates to position your Fontizer button/panel

callback

Function

any javascript function

null

Pass a function using the callback returned value, happen on each updates

variables

object

{size: '--foo', weight: '--bar'}

--base-font-size & --base-font-weight

If needed, you can override the default variables name.

A sprinkle of CSS?

override the styles

.fontizer-wrapper {}
.fontizer-button {}
.fontizer-icon {}
.fontizer-panel {}