@servicetitan/anvil-fonts

Anvil Fonts

The Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop ServiceTitan products. It contains tools for designers & developers, patterns, reusable components, guidelines, and more.

Installing fonts

If webpack is configured to support font files, they should be imported into the build automatically by importing the included CSS file.

import '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';

Including fonts manually

If webpack is not configured to include font files in the build, you can do this manually by copying the files to your target and importing a Less or SASS file.

cp ./node_modules/@servicetitan/anvil-fonts/dist/fonts/* [target fonts directory]

Less

@anvil-font-path: '../Fonts';
@import 'node_modules/@servicetitan/anvil-fonts/dist/less/anvil-fonts.less;

SCSS

$anvil-font-path: '../Fonts';
@import 'node_modules/@servicetitan/anvil-fonts/dist/scss/anvil-fonts.scss;