@sb1/ffe-webfonts

Install

``
npm install @sb1/ffe-webfonts
`

Usage

Full documentation on typgraphy usage is available at https://design.sparebank1.no/komponenter/typografi/.

There are two ways to use ffe-webfonts:

1. Copy the font files from node_modules/@sb1/ffe-webfonts/fonts/ and use sb1-fonts.less
2. Use sb1-fonts.css, where the fonts are base64 encoded inline

Approach 1 is probably what you want for performance reasons.

$3

Copy the font files from node_modules/@sb1/ffe-webfonts/fonts/ to a folder that will be shipped with your app. You can use npm-scripts, (if you use Webpack) copy-webpack-plugin, or whatever you see fit to get the files to where they need to be.

Import node_modules/@sb1/ffe-webfonts/sb1-fonts.less in your app:

`less
@import 'npm://@sb1/ffe-webfonts/sb1-fonts.less'; // with less-plugin
@import '~@sb1/ffe-webfonts/sb1-fonts.less'; // with webpack and less-loader
@import '../path/to/node_modules/@sb1/ffe-webfonts/sb1-fonts.less'; // by path
`

You need to provide a constant named @fonts-url after the @import with a URL path to the fonts folder so the browser knows where to download the font files.

`less
@import '~@sb1/ffe-webfonts/sb1-fonts.less';
@fonts-url: '/privat/forsikring/fonts';
`

$3

`css
@import url('~@sb1/ffe-webfonts/sb1-fonts.css');
`

`less
@import (inline) '~@sb1/ffe-webfonts/sb1-fonts.css';
`

Licenses

- Source code is licensed under MIT

Development

To start a local development server, run the following from the designsystem root folder:

`bash
npm install
npm run build
npm start
`

A local instance of Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.