Loading fonts

When working with custom font families, you should use this method that downloads fonts into offline storage and generates the appropriate font-face definition.

All methods

Method	Description	Supported since
addFont()	Load additionally font into applet cache	2.0.0

addFont()

Load your custom fonts into the Applet.

Parameters

Param	Type	Required	Description
uid	string	Yes	Unique file identifier is used for later file retrieval, must contain a-z,A-Z,0-9 and . characters
append	HTMLElement	Yes	Reference to HTMLElement where the generated font-face will resist
fontFamily	string	No	Font family that can be referenced from your CSS
formats	object	No	URI where these formats will be downloaded from
fontStretch	string	No	Allows you to make text wider or narrower
fontStyle	string	No	Apecifies the font stlye for a text
^^	^^	^^	Types: normal, italic, oblique, initial, inherit
fontWeight	string	No	Sets how thick or thin characters in text should be displayed
unicodeRage	string	No	Defines the range of unicode characters the font supports, default value is "U+0-10FFFF"

Formats parameters

Param	Type	Required	Description
woff2	String	No	URI points to woff2 file
woff	String	No	URI points to woff file
svg	String	No	URI points to svg file
ttf	String	No	URI points to ttf file
eot	String	No	URI points to eot file

Javascript Example

await sos.offline.addFont({
    uid: 'my-tondo-font',
    fontFamily: 'tondo',
    fontStretch: 'normal',
    fontStyle: 'normal',
    fontWeight: 'bold',
    unicodeRange: 'U+0-10FFFF',
    formats: {
        woff2: 'https://mycms.signageos.io/fonts/tondo-woff2',
        eot: 'https://mycms.signageos.io/fonts/tondo-eot',
        ttf: 'https://mycms.signageos.io/fonts/tondo-ttf',
        svg: 'https://mycms.signageos.io/fonts/tondo-svg',
        woff: 'https://mycms.signageos.io/fonts/tondo-woff',
    },
    append: document.body,
})
.then(() => {
    console.log('Generated');
});

info

Most properties follow the official CSS properties found on Mozilla Developer Page

GitHub Example

Example of Applet that load custom fonts

Usage with Typescript

You can also use all these methods with signageOS TypeScript.

addFont(
    uid: string;
    append: HTMLElement;
    fontFamily: string;
    formats: {
        woff2: string;
        woff?: string;
        svg?: string;
        ttf?: string;
        svg?: string;
    },
    fontStretch?: string;
    fontStyle?: 'normal' | 'italic' | 'oblique' | 'initial' | 'inherit';
    fontWeight?: string;
    unicodeRange?: string;
);

Errors

Although we are doing our best, following errors may occur when working with the Applet Resources.

Code	Type	Message
40105	AppletResourcesError	Already loading file: $$FILE_NAME$$
^^	^^	Please, check your code for multiple occurrences of addFile/s methods.
40106	AppletResourcesError	Already existing file: $$FILE_NAME$$
^^	^^	Please, check your code for occurrences of addFile/s methods on lines before this error.
49901	AppletResourceError	Please, check if the used URL is correct.
49902	FileNotFoundError	File was not found $$FILE_ID$$