registerFontStack

Type: Function

How to get registerFontStack?

JavaScript

import registerFontStack from 'fontoxml-families/src/registerFontStack.js'

Register a font stack for use in rendering content.

Font stacks can be selected by configuring the fontStack CVK property.

Example

In an appropriate package, place the font files in the src/assets/fonts folder, then add a styles.css file with the corresponding font-face rules to import these:

Other

(at)font-face {
    font-family: 'Ubuntu Condensed';
    src: url('assets/fonts/UbuntuCondensed.woff') format('woff');
}

Then add a configureSxModule.js file to register the font stack for use in the editor:

JavaScript

import registerFontStack from 'fontoxml-families/src/registerFontStack.js';

// Register a custom font stack using the "Ubuntu Condensed" font family, scaled up a bit for
// readability. Note the double quotes around the font family - once for JavaScript, once for
// CSS. As in CSS, fallback families may be separated by commas in the same JavaScript string.
registerFontStack('ubuntu-condensed', '"Ubuntu Condensed", sans-serif', 1.14);

This font stack may now be used in the schema experience configuration by setting the fontStack CVK property:

JavaScript

// Use this font stack for all note elements
configureProperties(sxModule, 'self::note', {
    fontStack: 'ubuntu-condensed'
});

Arguments

  1. stackName

    (Required)

    Type: String

    The name of the font stack.

  2. fontFamily

    (Required)

    Type: String

    Font families to use in the stack, using the same notation as used for the CSS font-family property.

  3. fontSizeAdjust

    (Required)

    Type: Number

    Size adjustment factor for the font, can be used to adjust fonts that appear smaller than others.

    Default value