Setup

Install the package

Define your font-face somewhere in your stylesheet

@font-face {
    font-family: "Rocher";
    src: url("./Rocher.woff2") format("woff2");
    font-display: block;
    font-weight: normal;
}

Usage

Pass in a font-family string and some initial settings (or normal).

const settings = {
  // axis: value,
  SHDW: 40,
  BVEL: 100
}

const [styles] = useVariableFont("Rocher", settings);

The first index will be CSS property object.

const [normalStyles] = useVariableFont("Rocher", "normal");

return <p style={{...normalStyles}}>Hello world</p>

The second index will be function to update the settings

const [styles, updateStyles] = useVariableFont("Rocher", "normal");

updateStyles({SHDW: 100});

• Same rules as initial settings
• New settings override previous settings
• passing normal resets the variation settings

Example

import React from "react";
import useVariableFont from "react-variable-fonts";

const initialSettings = {
    BVEL: 20,
    SHDW: 50
}

const Demo = () => {
  const [normalStyles] = useVariableFont("Rocher", "normal");
  const [customStyles, updateStyles] = useVariableFont("Rocher", initialSettings);

  const randomSetting = () => Math.floor(Math.random() * 100);

  return (
    <>
      <h1 style={{ ...normalStyles }}>Hello World</h1>
      <h1 style={{ ...customStyles }}>Hello Variable Fonts</h1>
      <button onClick={() => updateStyles({ SHDW: randomSetting() })}>
        ▲ bevel
      </button>
    </>
  );
};