ttf-loader

ttf-loader

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>
      );
    }
  }