Skip to content

Instantly share code, notes, and snippets.

@avorona

avorona/file-structure

Last active August 1, 2018 14:33
Show Gist options
  • Save avorona/3a67e7f3613bea5fd3dd8f52bd24bdd3 to your computer and use it in GitHub Desktop.
Save avorona/3a67e7f3613bea5fd3dd8f52bd24bdd3 to your computer and use it in GitHub Desktop.
Download ZIP
How to add custom font to the Storybook
Raw
file-structure
.storybook
--webpack.config.js
app
--package.json
----assets
------fonts
--------Lato-Regular.woff
--------Lato-Regular.woff2
Raw
package.json
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook watch-css -s ./app"
}
}
Raw
preview-head.html
<style type="text/css">
// Lato as example
@font-face {
font-family: 'Lato';
src: url('assets/fonts/Lato-Regular.woff2') format('woff2'),
url('assets/fonts/Lato-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
Raw
webpack.config.js
const path = require('path');
module.exports = (baseConfig, env, defaultConfig) => {
// Extend defaultConfig .
defaultConfig.resolve.modules.push('app');
defaultConfig.module.rules.push({
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loaders: ['file-loader'],
include: path.resolve(__dirname, '../'),
});
return defaultConfig;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment