Font Configuration Issues in Azure Maps – How to Specify Fonts for Mixed Chinese and English Text?

Question

Hello,

I'm facing an issue with Azure Maps when rendering GeoJSON data using a SymbolLayer. My goal is to display titles that contain both Chinese and English characters on the map. To ensure proper alignment and display, I attempted to specify custom fonts in the textOptions (aiming to use fonts that support both languages). However, when I set the font property, all the text disappears and I receive the following error in the console:

function addSymbolLayer(map, datasource) {
    const symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
        minZoom: 2,
        maxZoom: 22,
        iconOptions: {
            image: ['get', 'iconName'],
            size: 0.1,
            anchor: 'center',
            allowOverlap: true,
            ignorePlacement: true
        },
        textOptions: {
            textField: ['get', 'title'],
            offset: [0, 1.5],
            color: "#000",
            haloColor: "#FFF",
            haloWidth: 2,
            allowOverlap: true,
            ignorePlacement: true,
            font: ['Open Sans Regular', 'Noto Sans SC Regular', 'Microsoft YaHei Regular']
        }
    });
    map.layers.add(symbolLayer);
}

I have verified that the "Open Sans" font loads successfully via Google Fonts, but Azure Maps still returns a 400 error when I try to use the custom font setting.

My questions are as follows:

What fonts does Azure Maps officially support? Is there an official list of supported fonts for Azure Maps that I can refer to?

How do I correctly configure fonts in Azure Maps for mixed Chinese and English text? I need to ensure proper alignment and rendering of both languages without errors.

Is it possible to use locally hosted font resources with Azure Maps? If so, how should I configure them?

Any insights or guidance would be greatly appreciated. Thank you for your help!

Answer 1

Custom fonts are not currently supported in Azure Maps. Note that standard font files can't be used with the map unless you are using HTML markers for rendering. The reason for this is that font files can't be directly passed to the GPU and need to be converted into glyphs. This is how MapLibre (underlying render engine in Azure Maps) and Mapbox handle fonts in WebGL.

A complete list of fonts available in Azure Maps can be found and tested out in this sample: https://samples.azuremaps.com/?sample=symbol-layer-options

Digging into the map styles I have found two other font's used by Azure Maps, but haven't seen these documented anywhere, so no guarantee they will always be available, they are:

• Roboto-Regular
• Roboto-RegularItalic

I'm not sure which font would work best for Chinese. Note that Azure Maps is not currently supported in China, so there likely hasn't been much Chinese support released in Azure Maps yet.