5.0.13 • Published 10 months ago

@sb1/ffe-webfonts v5.0.13

Weekly downloads
133
License
SEE LICENSE IN RE...
Repository
-
Last release
10 months ago

@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.

Using Less

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:

@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.

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

CSS with inline fonts

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

Deprecated fonts

In addition to the SpareBank 1 fonts, this package currently still contains the previously used MuseoSans fonts. These are deprecated and will be removed at a later date.

MuseoSans is distributed through fonts.less, fonts.css and fonts-inline.less. Any use of these files should be replaced with sb1-fonts.less, sb1-fonts.css and sb1-fonts-inline.less.

Licenses

  • Source code is licensed under MIT
  • The MuseoSans fonts are licensed separately. See LICENSE-fonts.md.

Development

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

npm install
npm run build
npm start

A local instance of component-overview with live reloading will run at http://localhost:1234/.

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

5.0.12

10 months ago

5.0.13

10 months ago

5.0.6

1 year ago

5.0.10

11 months ago

5.0.11

11 months ago

5.0.9

12 months ago

5.0.8

1 year ago

5.0.7

1 year ago

5.0.5

1 year ago

5.0.4

1 year ago

5.0.3

1 year ago

5.0.2

1 year ago

5.0.1

1 year ago

5.0.0

1 year ago

4.0.1

1 year ago

4.0.0

2 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.1

4 years ago

2.1.0

6 years ago

2.0.5

6 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago