@nodifox/nfx-ng-typeface-nunito v2.0.0

Overview

Angular library designed to easily import the Nunito font into your project. By installing this dependency and importing the font family styles you will get a nice self-hosted webfont.

Demo

You can preview the font here.

Installation

npm i -S @nodifox/nfx-ng-typeface-nunito

Usage

Import the required font style into your main scss file. Remember that only the font styles you use will be included in your proyect build.

// (900) Nunito - Black
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-black.scss';
// (900) Nunito - Black Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-blackitalic.scss';
// (800) Nunito - ExtraBold
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-extrabold.scss';
// (800) Nunito - ExtraBoldItalic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-extrabolditalic.scss';
// (700) Nunito - Bold
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-bold.scss';
// (700) Nunito - Bold Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-bolditalic.scss';
// (600) Nunito - SemiBold
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-semibold.scss';
// (600) Nunito - SemiBold Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-semibolditalic.scss';
// (400) Nunito - Regular
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-regular.scss';
// (400) Nunito -  Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-italic.scss';
// (300) Nunito - Light
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-light.scss';
// (300) Nunito - Light Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-lightitalic.scss';
// (200) Nunito - ExtraLight
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-extralight.scss';
// (200) Nunito - ExtraLight Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-nunito/src/typefaces/nunito-extralightitalic.scss';

To simplify the import location of the font scss files you can include the typefaces into the styles preprocessor adding the dependency path to stylePreprocessorOptions in your angular.json.

{
    "stylePreprocessorOptions": {
        "includePaths": [
            "node_modules/@nodifoc/nfx-ng-typeface-nunito/src/typefaces"
        ]
    }
}

With the stylePreprocessorOptions set the import of each style should look like this.

// (900) Nunito - Black
@import 'nunito-black.scss';
// (900) Nunito - Black Italic
@import 'nunito-blackitalic.scss';
// (800) Nunito - ExtraBold
@import 'nunito-extrabold.scss';
// (800) Nunito - ExtraBoldItalic
@import 'nunito-extrabolditalic.scss';
// (700) Nunito - Bold
@import 'nunito-bold.scss';
// (700) Nunito - Bold Italic
@import 'nunito-bolditalic.scss';
// (600) Nunito - SemiBold
@import 'nunito-semibold.scss';
// (600) Nunito - SemiBold Italic
@import 'nunito-semibolditalic.scss';
// (400) Nunito - Regular
@import 'nunito-regular.scss';
// (400) Nunito -  Italic
@import 'nunito-italic.scss';
// (300) Nunito - Light
@import 'nunito-light.scss';
// (300) Nunito - Light Italic
@import 'nunito-lightitalic.scss';
// (200) Nunito - ExtraLight
@import 'nunito-extralight.scss';
// (200) Nunito - ExtraLight Italic
@import 'nunito-extralightitalic.scss';

And now just set the font-family, font-style and font-weight in yout scss.

font-family: 'Nunito';
font-style: normal;
font-weight: 900;