Skip to main content
Version: 6.3.0

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

MethodDescriptionSupported since
addFont()Load additionally font into applet cache2.0.0

addFont()

Load your custom fonts into the Applet.

Parameters

ParamTypeRequiredDescription
uidstring
Yes
Unique file identifier is used for later file retrieval, must contain a-z,A-Z,0-9 and . characters
appendHTMLElement
Yes
Reference to HTMLElement where the generated font-face will resist
fontFamilystring
No
Font family that can be referenced from your CSS
formatsobject
No
URI where these formats will be downloaded from
fontStretchstring
No
Allows you to make text wider or narrower
fontStylestring
No
Apecifies the font stlye for a text
^^^^^^Types: normal, italic, oblique, initial, inherit
fontWeightstring
No
Sets how thick or thin characters in text should be displayed
unicodeRagestring
No
Defines the range of unicode characters the font supports, default value is "U+0-10FFFF"

Formats parameters

ParamTypeRequiredDescription
woff2String
No
URI points to woff2 file
woffString
No
URI points to woff file
svgString
No
URI points to svg file
ttfString
No
URI points to ttf file
eotString
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

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.

CodeTypeMessage
40105AppletResourcesErrorAlready loading file: $$FILE_NAME$$
^^^^Please, check your code for multiple occurrences of addFile/s methods.
40106AppletResourcesErrorAlready existing file: $$FILE_NAME$$
^^^^Please, check your code for occurrences of addFile/s methods on lines before this error.
49901AppletResourceErrorPlease, check if the used URL is correct.
49902FileNotFoundErrorFile was not found $$FILE_ID$$