1.0.0 • Published 3 years ago
@nodifox/nfx-ng-typeface-montserrat v1.0.0
Overview
Angular library designed to easily import the Montserrat 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-montserrat
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) Montserrat - Black
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-black.scss';
// (900) Montserrat - Black Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-blackitalic.scss';
// (800) Montserrat - ExtraBold
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-extrabold.scss';
// (800) Montserrat - ExtraBoldItalic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-extrabolditalic.scss';
// (700) Montserrat - Bold
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-bold.scss';
// (700) Montserrat - Bold Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-bolditalic.scss';
// (600) Montserrat - SemiBold
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-semibold.scss';
// (600) Montserrat - SemiBold Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-semibolditalic.scss';
// (600) Montserrat - Medium
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-medium.scss';
// (600) Montserrat - Medium Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-mediumitalic.scss';
// (400) Montserrat - Regular
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-regular.scss';
// (400) Montserrat - Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-italic.scss';
// (300) Montserrat - Light
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-light.scss';
// (300) Montserrat - Light Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-lightitalic.scss';
// (200) Montserrat - ExtraLight
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-extralight.scss';
// (200) Montserrat - ExtraLight Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-extralightitalic.scss';
// (200) Montserrat - Thin
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-thin.scss';
// (200) Montserrat - Thin Italic
@import 'node_modules/@nodifox/nfx-ng-typeface-montserrat/src/typefaces/montserrat-thinitalic.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-montserrat/src/typefaces"
]
}
}
With the stylePreprocessorOptions set the import of each style should look like this.
// (900) Montserrat - Black
@import 'montserrat-black.scss';
// (900) Montserrat - Black Italic
@import 'montserrat-blackitalic.scss';
// (800) Montserrat - ExtraBold
@import 'montserrat-extrabold.scss';
// (800) Montserrat - ExtraBoldItalic
@import 'montserrat-extrabolditalic.scss';
// (700) Montserrat - Bold
@import 'montserrat-bold.scss';
// (700) Montserrat - Bold Italic
@import 'montserrat-bolditalic.scss';
// (600) Montserrat - SemiBold
@import 'montserrat-semibold.scss';
// (600) Montserrat - SemiBold Italic
@import 'montserrat-semibolditalic.scss';
// (600) Montserrat - Medium
@import 'montserrat-medium.scss';
// (600) Montserrat - Medium Italic
@import 'montserrat-mediumitalic.scss';
// (400) Montserrat - Regular
@import 'montserrat-regular.scss';
// (400) Montserrat - Italic
@import 'montserrat-italic.scss';
// (300) Montserrat - Light
@import 'montserrat-light.scss';
// (300) Montserrat - Light Italic
@import 'montserrat-lightitalic.scss';
// (200) Montserrat - ExtraLight
@import 'montserrat-extralight.scss';
// (200) Montserrat - ExtraLight Italic
@import 'montserrat-extralightitalic.scss';
// (200) Montserrat - Thin
@import 'montserrat-thin.scss';
// (200) Montserrat - Thin Italic
@import 'montserrat-thinitalic.scss';
And now just set the font-family, font-style and font-weight in yout scss.
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
1.0.0
3 years ago