Fonts

Set font through the hosting website

The SDK is loaded into a div container at the end of the body element, with an id of #anywhere-expert-sdk.
By default, the SDK inherits its font from any element encapsulating it (its parent element at any level). To change the SDK font, make sure there is a font-family CSS property set correctly above the SDK main container.

Set font through the theme

The SDK theme supports setting the font-family and adding new font-faces.
There is only support for fontFamily and src properties of CSS font-faces. Contact the team if you need us to implement more capabilities.

type FontFace = {
    fontFamily: string;
    src: string;
};

type Theme = {
    // ... other theme properties
    fonts: {
        fontFaces?: FontFace[];
        fontFamily?: string;
    }
}

There are three ways to set the theme:

1. Based on the AppKey - by contacting the SDK team with the fonts details.
2. In the code, in the initialize method, under initializationSettings:

window.AE_SDK(async (thrownError, AE_SDK) => {
    await AE_SDK.initialize({
        theme: {
            fonts: {
                fontFamily: 'Gochi Hand',
                fontFaces: [{
                    fontFamily: 'Gochi Hand',
                    src: `url("https://fonts.gstatic.com/s/gochihand/v11/hES06XlsOjtJsgCkx1Pkfon_-18kTWE.woff2")`,
                }]
            }
        }
    });
});

3. In the code, using the appendSettings function:

window.AE_SDK((thrownError, AE_SDK) => {
    AE_SDK.appendSettings(settings => {
        settings.theme.fonts.fontFamily = 'Gochi Hand';
        settings.theme.fonts.fontFaces = [
            {
                fontFamily: 'Gochi Hand',
                src: `url("https://fonts.gstatic.com/s/gochihand/v11/hES06XlsOjtJsgCkx1Pkfon_-18kTWE.woff2")`,
            }];

        return settings;
    });
});

In the example above, we load the Gochi Hand font-face from Google, and also set it as a font family.

The fontFaces property is an array. It allows you to load more than one global font face, so you can later only switch the font family to the required font.