Variables
Variables are either processed at build-time by the Sass compiler, if they are Sass variables, or at run-time by the browser, if they are CSS custom variables (CSS custom properties).
The Sass variables appear as a @key:value format and are generally used to theme a component. CSS custom properties appear as a --key: value format.
Typography
Color and Font custom props
There is a Sass mixin for defining the CSS custom variables (CSS custom properties) used in the project. This should be used and included once in your project’s CSS entry-point file.
@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@include define-custom-props;
Font stack
Override this variable in order to specify a font stack other than the CFPB’s default brand font and fallback.
:root {
--font-stack: 'Avenir Next', Arial, sans-serif;
}
Font source
There is a Sass mixin for specifying the path to the woff and woff2 font files for the CFPB default brand font, Avenir Next. Pass in the path to the files. The path can be either a relative or absolute path.
@include licensed-font('/path/to/fonts/woff/files');