Skip to main content

Fonts

How to configure fonts in dxchart5-react?​

By following the instructions below, you can easily replace the default fonts with your own.

Default Fonts​

By default, dxchart5-react application uses the following fonts:

--docs-font-main: 'Open Sans', sans-serif;
--docs-font-main-semibold: 'Open Sans Semibold', sans-serif;
--docs-font-main-bold: 'Open Sans Bold', sans-serif;
--docs-font-editor: 'IBM Plex Mono', monospace;
--docs-font-editor-semibold: 'IBM Plex Mono SemiBold', monospace;
--docs-font-editor-bold: 'IBM Plex Mono Bold', monospace;

How to Override Fonts​

1. Connecting Your Own Fonts​

Using Google Fonts​

If you want to use fonts from Google Fonts, add the following line in your HTML file inside the <head> tag:

<link
	href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Source+Code+Pro:wght@400;600;700&display=swap"
	rel="stylesheet" />

Using Local Fonts​

If you prefer to use local fonts, add them using the @font-face rule in your CSS file:

@font-face {
	font-family: 'MyLocalFont';
	src: url('path/to/font.woff2') format('woff2'), url('path/to/font.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

2. Overriding CSS Variables​

After connecting the fonts, override the default variables with your custom font values in your CSS file:

:root {
	--docs-font-main: 'YourFont', sans-serif;
	--docs-font-main-semibold: 'YourFont SemiBold', sans-serif;
	--docs-font-main-bold: 'YourFont Bold', sans-serif;

	--docs-font-editor: 'YourEditorFont', monospace;
	--docs-font-editor-semibold: 'YourEditorFont SemiBold', monospace;
	--docs-font-editor-bold: 'YourEditorFont Bold', monospace;
}

Conclusion​

Customizing the fonts in our application is simple and convenient. By following the instructions above, you can configure the appearance of your application to your preferences. If you want to configure fonts on canvas, you can read how to do it here