- 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> ); } }
-
Notifications
You must be signed in to change notification settings - Fork 2
unimonkiez/ttf-loader
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
About
The simplest font loading using webpack available
Resources
Stars
Watchers
Forks
Packages 0
No packages published