Mapbox-gl-js: Mixing remote and local fonts

[honjo2]

mapbox-gl-js version: v1.3.0

If localIdeographFontFamily is "'Hiragino Mincho ProN'".
Japanese(Kanji & Hiragana & Katakana) labels is local font.
But, Alphabet & Numbers labels is remote font.

If localIdeographFontFamily is false.
All labels is remote font.

Is this a specification?

[kkaefer]

@honjo2 This is by design: localIdeographFontFamily only affects ideographs from the Chinese, Japanese, and Korean glyph ranges. All other glyphs will be rendered with remote/server-generated glyphs. We use TinySDF to generate the signed distance fields we use to render glyphs locally. Unfortunately, there is no cross-platform API for retrieving all of the necessary glyph metrics (in particular width and baseline) to produce correct spacing. CJK characters are typically monospaced, or at least only have glyphs with identical width. TinySDF doesn't detect or query the glyph width; it uses a heuristic to guess the correct width. In practice, this produces acceptable results. However, mixing CJK with non-CJK glyphs that are based on a different font might produce a mismatched look. We recommend using a neutral font with a matching baseline.

[honjo2]

'Hiragino Mincho ProN'(local font) includes alphabet and numbers.

So, I want display all with local font.

[kkaefer]

Yes, it includes latin characters, but JavaScript doesn't have a way to access the _metrics_ (e.g. width, ascender, spacing) of local fonts.

[honjo2]

I understand, Thanks.
Is this design the same for mapbox-gl-native?

[kkaefer]

Yes, however, in mapbox-gl-native, we have the ability to access font metrics because we can read the actual files and have access to platform-native APIs. There's no implementation that actually does that though.

[honjo2]

I got it thank you.

[exotfboy]

@kkaefer: If we use the same font in localIdeographFontFamily and remote font server, can they result in a same look and feel?

[asheemmamoowala]

If we use the same font in localIdeographFontFamily and remote font server, can they result in a same look and feel?

Yes this should work. There may be minute differences between the server-delivered and locally rendered font data based on how they are processed into SDFs.