Skip to Content
UI KitGetting StartedFonts

Fonts

Learn how to use all the fonts that distributed with the UI Kit.

We have a set of fonts that we use in our applications. We distribute these fonts as a package so that you can use them in your applications as well. Our main font family is Jost .

We provide an icon font as well. However, note that we don’t recommend using icon fonts anymore. We recommend using our modern react components instead. You can find more information about this in the Iconography section.

Jost Variable

Variable font means that you can change the font weight and font style with a single font file. This way, you can use the font with any weight and style you want without having to load multiple font files. This also means that the font file size is smaller than the regular fonts. This reduces the overall bundle size of your application and improves the performance.\

Install the font package

Every font package name will be starting with @akinon/fonts-. To install the Jost Variable font, you can run the following command:

pnpm install '@akinon/fonts-jost-variable';

Import the font in your project

After installing the package, you need to import the font in your project. You would typically do this in your higher level components or main entry points.

import '@akinon/fonts-jost-variable'; // Defaults to wght axis
import '@akinon/fonts-jost-variable/wght.css'; // Specify axis
import '@akinon/fonts-jost-variable/wght-italic.css'; // Specify axis and style

Also, you don’t have to worry about the importing unused font families. Browser will only download the font families that you use in your CSS.

Supported variables:

  • Weights: [100,200,300,400,500,600,700,800,900]
  • Styles: [italic,normal]
  • Subsets: [cyrillic,latin,latin-ext]
  • Axes: [wght]

Use the specific font in your CSS

Now, you can start using the font in your CSS. You can use the font with any weight and style you want.

*,
*::before,
*::after {
  font-family: 'Jost Variable', sans-serif;
}

Our ui-kit inherits the font family from the root element. So if you don’t install the fonts in your application, you’ll see the default serif font as the font family. Basically you can use any font you’d like in your application and ui-kit will inherit that font family.

Icomoon

We have a set of icons that we use in our applications. We distribute these icons as a package so that you can use them in your applications as well. We use Icomoon  to generate the icon font. But as mentioned above, we don’t recommend using icon fonts anymore. We recommend using our modern react components instead. You can find more information about this in the Iconography section.

We released this package to support legacy applications that still use icon fonts.

Install the icon package

You can install the icon font by running the following command:

pnpm install '@akinon/fonts-icomoon';

Import the icon files in project

After installing the package, you need to import the icon files in project. You would typically do this in your higher level components or main entry points.

import '@akinon/fonts-icomoon';

Use the specific icon in HTML

Now, you can use the icon by adding the specific class to an element.

<span class="icon-outdent" />

Font package will see the icon-* class and will directly add font family to the element and will add the specific icon as ::before pseudo element. You can find the list of all the available icons in the Iconography section.

Design ResourcesIconography