TomTom Maps for JavaScript
    Preparing search index...

    Type Alias CustomTypeface

    A typeface of your own for map labels, from font files you host or load from a font CDN. The SDK ships no font, and the map fetches these files itself. Set it for every label on the map through StylingFoundationsModule, or for one module's labels through their customTypeface.

    Give each weight one file URL, drawing the characters in unicodeRange, or a list of CustomTypefaceFiles with a range each, such as a font CDN's latin and latin-ext files.

    • Each label keeps its weight and slant. A weight with no file takes the file of the nearest weight given. An italic with none takes the nearest italic given, and the upright file only without one.
    • Characters outside the files' ranges, and every character of a file that fails to load, are drawn in the style's own Noto face of the same weight. MapLibre logs a console warning for each file that fails, with its URL and the reason.
    • The browser draws the files' text one character cluster at a time. A script whose letters join or reorder, such as Arabic or Devanagari, reads best left to the style's faces, outside the ranges.
    const fraunces = 'https://cdn.jsdelivr.net/fontsource/fonts/fraunces@5/latin';
    await StylingFoundationsModule.get(map, {
      labels: {
        customTypeface: {
          regular: `${fraunces}-400-normal.woff2`,
          bold: `${fraunces}-700-normal.woff2`,
          regularItalic: `${fraunces}-400-italic.woff2`,
        },
      },
    });
    type CustomTypeface = {
        bold?: string | CustomTypefaceFile[];
        boldItalic?: string | CustomTypefaceFile[];
        medium?: string | CustomTypefaceFile[];
        mediumItalic?: string | CustomTypefaceFile[];
        regular: string | CustomTypefaceFile[];
        regularItalic?: string | CustomTypefaceFile[];
        unicodeRange?: string[];
    }
    Index
    bold? boldItalic? medium? mediumItalic? regular regularItalic? unicodeRange?
    bold?: string | CustomTypefaceFile[]

    The bold weight.

    boldItalic?: string | CustomTypefaceFile[]

    The bold italic.

    medium?: string | CustomTypefaceFile[]

    The medium weight.

    mediumItalic?: string | CustomTypefaceFile[]

    The medium italic.

    regular: string | CustomTypefaceFile[]

    The regular weight, which every role falls back to when no nearer file is given.

    regularItalic?: string | CustomTypefaceFile[]

    The regular italic.

    unicodeRange?: string[]

    The characters the files given as a plain URL draw, listed as in CustomTypefaceFile.unicodeRange.

    Default: the characters of the latin files that Fontsource and Google Fonts serve, which are Basic Latin, Latin-1 and the common punctuation.

    Settings
    Member Visibility

    On This Page
    Properties