JavaScript ChartsFonts

Font options include font family, size, weight, and style.

Font Options Copy Link

Each chart element has font options, including fontFamily, fontSize and fontWeight. See API Options for more details.

The font options for the whole chart can be set once, by using theme parameters.

Font families can accept the following value types:

Syntax	Description
`string`	A CSS font-family value, such as `'Arial, sans-serif'`.
`{ googleFont: 'IBM Plex Sans' }`	A Google font. You must load the font or ask the chart to load it for you, see Loading Google Fonts below.
`['Arial', 'sans-serif']`	An array of fonts. Each item can be a string font name or a `{ googleFont: "..." }` object. The browser will attempt to use the first font and fall back to later fonts if the first one fails to load or is not available on the host system.

To prevent potential licensing and privacy implications, the chart will not load Google fonts unless requested to.

If you want to use Google fonts, you should either:

Set the chart's loadGoogleFonts option to true and use the { googleFont: "..." } object for the chart to load the font from Google's CDN.
Load the font yourself using a @font-face rule in your application's CSS.

If the font has not been loaded through either of the above methods, the theme will fall back to the most appropriate font available on the system.

In the above example:

The loadGoogleFonts option is set to true to automatically load Google fonts.
The title uses the Google font Pacifico.
The subtitle uses the Google font DM Serif Text with a fallback to monospace.
The left axis uses the local system font Helvetica with a fallback to Arial then san-serif.
The bottom axis uses the Google font Orbitron.