ttf-loader
1.0.2 • Public • Published ttf-loader
Import and use fonts easily in your javascript web app
Usage
- Install
npm install --save-dev ttf-loader file-loader
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!
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>
);
}
}
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
Weekly Downloads