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"