ttf-loader

1.0.2 • Public • Published

ttf-loader

npm versionBuild Status

Import and use fonts easily in your javascript web app

Usage

  • Install
    # file-loader is peerDependency 
    npm install --save-dev ttf-loader file-loader
    # or yarn 
    yarn add -D ttf-loader file-loader
  • Add loader to your webpack-config
    ...
     module: {
        rules: [
          {
              test: /\.ttf$/,
              use: [
                {
                  loader: 'ttf-loader',
                  options: {
                    name: './font/[hash].[ext]',
                  },
                },
              ]
          }
        ]
     }
  • Import ttfs and use them in your code!
    • Inline
    import React, { Component } from 'react';
    import someFontFamily from 'some.ttf';
     
    export default class App extends Component {
      render() {
        return (
          <div style={{ fontFamily: someFontFamily }}>
            <span>
              Welcome to my React app!
            </span>
          </div>
        );
      }
    }
    • jss
    import React, { Component } from 'react';
    import jss from 'jss';
    import someFontFamily from 'some.ttf';
     
    const spanClass = jss.createStyleSheet({
      span: {
        'font-family': someFontFamily,
      },
    }).attach().classes.span;
     
    export default class App extends Component {
      render() {
        return (
          <div className={spanClass}>
            <span>
              Welcome to my React app!
            </span>
          </div>
        );
      }
    }

Package Sidebar

Install

npm i ttf-loader

Weekly Downloads

4,730

Version

1.0.2

License

ISC

Last publish

Collaborators

  • unimonkiez