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"