Skip to main content

fonts

Installation

with npm:

npm install @morfeo/fonts

or yarn:

 yarn add @morfeo/fonts

note: @morfeo/fonts is also included on @morfeo/web


Apis

mountFont

The mountFont Api mount a font on the document head

@import

Setting the prop importFontFace to true the style will be resolve to @import ....

It is usefull if you want to import a css file with the fontFace definitions.

It is also the case of Google Font.

import { mountFont } from '@morfeo/fonts';

mountFont({
urls: [
{
url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
},
],
name: 'bold',
family: 'Roboto',
importFontFace: true,
});

@fontFace

By not defining or setting to true the importFontFace prop the style will resolve on @fontFace .... It allows to create @fontFace definition from scratch

import { mountFont } from '@morfeo/fonts';

mountFont({
urls: [
{
url: 'src/fonts/Roboto-bold.woff',
format: 'woff',
},
{
url: 'src/fonts/Roboto-bold.woff2',
format: 'woff2',
},
],
name: 'bold',
family: 'Roboto',
weight: 'bold',
});

References

export type FontType = 'woff' | 'woff2' | 'trueType' | 'embedded-opentype';

export type FontUrl = {
url: string;
format?: FontType;
};

export type MountFontParams = {
name: string;
urls: FontUrl[];
family: string;
importFontFace?: boolean;
weight?: string;
};