Material Font Features

A React component that displays a ui for choosing the opentype font features of a font. The component then provides a string you can use in CSS rules to display the font with the selected font features. Depends on MUI. If you use a different UI framework, you can build you own using opentype.features.js.

Installation

npm install --save material.font.features

This assumes you are using npm as your package manager.

Requires: @mui/material: >= 5 react: >= 17

Usage

// Example

import React from 'react';
import './App.css';
import FontFeatures from 'material.font.features'

function App() {

  const [settings, setSettings] = React.useState('');

  return (    
    <div className="App">
      <h2>font-feature-settings : {settings};</h2>
      <br />
      <FontFeatures fontUrl={'Andika-Regular.ttf'} settings={settings} onSettingsChanged={(newSettings) => setSettings(newSettings)} />        
    </div>
  );
}

export default App;

App.css:

.font-features-container
{
  display: flex;
  flex-direction: column;
}

.font-features-entry
{
  padding-left: 10px;
}

API

FontFeatures

| props | description | type | default | | ---------- | --------------------------- | ------ | ------- | | settings | the default font feature values | string | | | settingsFormat | format of the settings props | SettingsFormat | SettingsFormat.CSS | | fontFile | file path to font file | string | | | fontUrl | url to the font file | string | | | fontData | font file binary data | ArrayBuffer | | | fontFeatures | pre-extracted font data. | Feature[] | | | showHidden | show options normally hidden to the user | boolean | false | | onSettingsChanged| event that fires when user changes feature values. | Function | |

Only set one of fontFile, fontUrl, fontData or fontFeatures.

Feature type is defined in opentype.features.js

legacySettingsToCss(settings: string)

Convert SettingsFormat.LEGACY settings to SettingsFormat.CSS

Styling

The container div has class ".font-features-container"

Each option div has class ".font-features-entry"