Nine Post Meridiem

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

    Install

    npm i ttf-loader

    DownloadsWeekly Downloads

    4,336

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • unimonkiez