Azure Maps SymbolLayer Font Issue

Question

Hi,

Based on another question that I had asked (https://learn.microsoft.com/en-us/answers/questions/1864345/azure-maps-drag-drop-labels-for-polygons-and-symbo), I have successfully implemented a feature that allows dragging a SymbolLayer "label" based on copying it's settings to an Html Marker, however the SegoeUi-Regular font that I am using for the Html Marker doesn't seem to match the SegoeUi-Regular font that is used by the SymbolLayer in Azure Maps.

I downloaded the Segoe UI font from here: https://learn.microsoft.com/en-us/typography/font-list/segoe-ui

Example of hovering over a SymbolLayer's "label" and creating the HTML Marker, which should align perfectly:

Dragging the Html Marker:

And here is a screenshot of comparing the font used in an Azure Maps sample (https://samples.azuremaps.com/symbol-layer/symbol-layer-options) compared to the Windows Font Settings viewer (the first example in the Windows Font Settings viewer is the Segoe UI Regular font - segoeui.ttf):

Comparing the 2 and the 7 in all of the above screenshots, it is clear that the SegoeUi-Regular font used by Azure Maps is not the same as the one that I downloaded from Microsoft.

Is there a source for the fonts used by Azure Maps that I can use in my application so that the fonts will align?

Thanks,

Ken

Answer 1

I'm fairly certain the same font file was originally used, however, in order to be used by WebGL, the font file goes through a conversion process to create a glyph file as font's are actually drawn like shapes in WebGL (this is how MapBox and MapLibre work which is what the Azure Maps Web SDK is built on top of). This is likely the reason for the discrepancy and there isn't a whole lot we can do about this. Here is and an example tool https://maplibre.org/font-maker/

Answer 2

Bubbling up this question as it seems to have been lost after my last comment on the previous answer. Specifically:

Are any of the other fonts used by Azure Maps available for download (I was only able to find the Segoe UI font to download from Microsoft)?

Answer 3

Thanks for reaching out. Regarding to this issue you've encountered, if this blocked you urgently, you could try to download Segoe UI version 5.01 for generating the same font that Azure Maps is using.