react-variable-fonts
🖋️
A React Hook for loading and manipulating variable fonts.
You need React
^16.7.0-alpha.0
to use Hooks.
What can my font do?
Setup
Install the package
npm i react-variable-fonts
Define your font-face somewhere in your stylesheet
Usage
normal
).
Pass in a font-family string and some initial settings (or const settings = // axis: value, SHDW: 40 BVEL: 100 const styles = ;
The first index will be CSS property object.
const normalStyles = ; return <p style=...normalStyles>Hello world</p>
The second index will be function to update the settings
const styles updateStyles = ; ;
- Same rules as initial settings
- New settings override previous settings
- passing
normal
resets the variation settings
Example
;; const initialSettings = BVEL: 20 SHDW: 50 const Demo = { const normalStyles = ; const customStyles updateStyles = ; const randomSetting = Math; return <> <h1 style= ...normalStyles >Hello World</h1> <h1 style= ...customStyles >Hello Variable Fonts</h1> <button onClick= > ▲ bevel </button> </> ;};