React Font Face
This package is a higher order component you can use in your React components to use custom fonts, icon fonts or Google imported fonts. This HOC uses react-helmet to inject the font-face declarations into the head in an efficient and consolidated manner.
Why?
React components should be truly modular. Where this falls apart is when you use custom fonts. Yes, we can use SVG's to replace icon fonts but we still need to use custom fonts on occasion, which forces us to use global CSS in a React application. This feels weird to still maintain a global stylesheet just for font declarations.
This component allows you to package custom fonts with your component and easily use the component in a project with the expected style rendered.
Usage
Install and save to your environment use the terminal.
npm install react-font-face --save
Import the package in your app.
Wrap your component in the higher order component where ever you export the component. You will also need to pass in an config object using Google Fonts, your own font files or both.
// SHOWS IMPORT OF LOCAL FILE // BUILD YOUR STYLESconst styles = main: margin: 15 lineHeight: 14 fontFamily: 'Bangers' google1: fontFamily: 'Pangolin' google2: fontFamily: 'Roboto Mono' ; // THE ACTUAL COMPONENTComponent { return <div style=stylesmain> <p>Custom font from main style</p> <p style= stylesgoogle1 >Custom Font from first google style</p> <p style= stylesgoogle2 >Custom Font from second google style</p> </div> ; } // CONFIG OBJECT TO PASS TO HOClet fontConfig = google: 'Pangolin' 'Roboto Mono' // MORE FONTS IN THE ARRAY ... file: fontFamily: 'Bangers' fontStyle: 'normal' fontWeight: 400 unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215' file: bangersFont fontType: 'truetype' fileLocal: 'Bangers Regular' // MORE FONTS IN THE ARRAY ... // WRAP THE EXPORTED COMPONENT ExampleStyledComponent fontConfig;
Development
To test it out the package locally, pull the repo and run storybook.
$ git clone https://github.com/ojdx/react-font-face.git$ cd /react-font-face$ npm install$ npm run storybook