Working with Fonts

To maintain user experience, use system fonts.

In rare cases, you may need local fonts.

System Font Family

Class	Properties
font-b24-system	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-b24-primary	synonym `b24-system`
font-b24-secondary	synonym `b24-system`
font-b24-system-mono	font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
font-b24-helvetica	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

<p class="font-b24-system ...">...</p>
<p class="font-b24-primary ...">...</p>
<p class="font-b24-secondary ...">...</p>
<p class="font-b24-system-mono ...">...</p>
<p class="font-b24-helvetica ...">...</p>

Local Font Family

Class	Properties
font-b24-opensans	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-b24-roboto	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, monospace;
font-b24-roboto-mono	font-family: "Roboto Mono", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-b24-montserrat	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-b24-comforter-brush	font-family: "Comforter Brush";

Adding Local Fonts

To add local fonts:

1. Copy the fonts to the project's public folder, for example, public/fonts:

npm

$ npm @bitrix24/ui copy-fonts --dest=public/fonts

2. Set the useLocalFonts parameter in the plugin configuration:

tailwind.config.js

module.exports = {
	content: [
		'...'
	],
	theme: {},
	plugins: [
		'...',
		require('@bitrix24/b24style')({
			useLocalFonts: true
		})
	]
};

3. Apply the font in your application.

You can control the typeface of text using the font family utilities.

<p class="font-b24-opensans ...">...</p>
<p class="font-b24-roboto ...">...</p>
<p class="font-b24-roboto-mono ...">...</p>
<p class="font-b24-montserrat ...">...</p>
<p class="font-b24-comforter-brush ...">...</p>

View font family reference information