# react-font-it

> A package for your React components in order to use custom fonts, icon fonts or Google imported fonts

Latest version **1.0.6** (published 2018-05-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-font-it
pnpm add react-font-it
yarn add react-font-it
bun add react-font-it
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-05-05 |
| First published | 2018-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 268.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Iulia Lungu |
| Maintainers | iulial |

## Links

- npm: https://www.npmjs.com/package/react-font-it
- npm.io page: https://npm.io/package/react-font-it

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.2
- [react-helmet](https://npm.io/package/react-helmet.md) ^5.2.0

## Recent versions

- 1.0.6 (latest) — 2018-05-05
- 1.0.5 — 2018-05-05
- 1.0.4 — 2018-05-05
- 1.0.3 — 2018-05-05
- 1.0.2 — 2018-05-05
- 1.0.1 — 2018-05-05
- 1.0.0 — 2018-05-05

## README

## React Font It 

A package for your React components in order to use custom fonts, icon fonts or Google imported fonts.
It uses [react-helmet](https://github.com/nfl/react-helmet) to inject the font-face declarations into the head of your app entry point. 

__Disclaimer:__ This is a rewrite of [react-font-face](https://github.com/ojdx/react-font-face).


### Usage

Install and save to your environment using the terminal. 

```bash
npm install react-font-it -S
```

Wrap your component in the higher order component wherever you export the component.  You will also need to pass in an config object using Google Fonts or your own font files or both.

```js
import ReactFontIt from 'react-font-it'
// SHOWS IMPORT OF LOCAL FILE
import bangersFont from './Bangers-Regular.ttf'

// BUILD YOUR STYLES
const styles = {
  main: {
    margin: 15,
    lineHeight: 1.4,
    fontFamily: 'Bangers',
  },
  google1: {
    fontFamily: 'Pangolin',
  },
  google2: {
    fontFamily: 'Roboto Mono',
  },
};

// THE ACTUAL COMPONENT we want to 'font'
class ExampleComponent extends Component {
  render() {
    return (
      <div style={styles.main}>
        <p>Custom font from main style.</p>
        <p style={ styles.google1 }>Custom Font from first google style.</p>
        <p style={ styles.google2 }>Custom Font from second google style.</p>
      </div>
    );
  }
}

const fontConfig = {
  google: [
    'Pangolin',
    'Roboto Mono',
    
    // MORE FONTS IN THE ARRAY
    // Note this has to be an 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
    // Note this has to be an array
    ...
  ],
}

// WRAP THE EXPORTED COMPONENT 
export default ReactFontIt(ExampleComponent, fontConfig);
```




### Development

Contributions are welcome.

```bash
$ git clone https://github.com/iuliaL/react-font-it.git
$ npm i
$ npm run watch
```

---
_Source: https://npm.io/package/react-font-it · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._