---
title: "Use locally generated ideographs | JavaScript maps SDK"
description: "Use the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Use locally generated ideographs
Rendering Chinese/Japanese/Korean (CJK) ideographs and precomposed Hangul Syllables requires downloading large amounts of font data, which can significantly slow map load times. Use the `localIdeographFontFamily` setting to speed up map load times by using locally available fonts instead of font data fetched from the server. This setting defines a CSS ‘font-family’ for locally overriding generation of glyphs in the ‘CJK Unified Ideographs’ and ‘Hangul Syllables’ Unicode ranges. In these ranges, font settings from the map’s style will be ignored in favor of the locally available font. Keywords in the fontstack defined in the map’s style (light/regular/medium/bold) will be translated into a CSS ‘font-weight’.
This setting is enabled by default to use the system ‘sans-serif’ font. When overriding this setting, the fonts you select may not be available on all users’ devices. Specify at least one broadly available fallback font class such as ‘sans-serif’.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
config.primaryLanguage = maptilersdk.Language.NON_LATIN;
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [120.3049, 31.4751],
zoom: 12,
localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
});
```
#### index.html
```html
Use locally generated ideographs
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Use locally generated ideographs
```
## Related examples
### [Change the case of labels](https://docs.maptiler.com/sdk-js/examples/change-case-of-labels/)
Examples
Modify label text casing using upcase and downcase expressions.
### [Display and style rich text labels](https://docs.maptiler.com/sdk-js/examples/display-and-style-rich-text-labels/)
Examples
Display multilingual rich text labels using format expressions.
### [Set map language](https://docs.maptiler.com/sdk-js/examples/language-map/)
Tutorials
This tutorial shows how to change the default map labels language.
### [Icon image URL inside a rich text format label](https://docs.maptiler.com/sdk-js/examples/rich-text-format/)
Examples
Display rich text labels with texts and icons.