The simplest font loading using webpack available
npm install ttf-loaderbash
# 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
js
...
module: {
rules: [
{
test: /\.ttf$/,
use: [
{
loader: 'ttf-loader',
options: {
name: './font/[hash].[ext]',
},
},
]
}
]
}
`
* Import ttfs and use them in your code!
* Inline
jsx
import React, { Component } from 'react';
import someFontFamily from 'some.ttf';
export default class App extends Component {
render() {
return (
Welcome to my React app!
);
}
}
`
* jss
jsx
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 (
Welcome to my React app!
);
}
}
``