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
CSS custom properties generated from W3C design token format JSON for colors (e.g. custom-props.css) are used. This should be included once in your project’s CSS entry-point file.
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
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: 'Source Sans 3 Variable', Arial, sans-serif;
}
Font source
There is a Sass mixin for specifying the path to the woff2 font files for the CFPB default brand font, Source Sans 3. Pass in the path to the files. The path can be either a relative or absolute path.
@include licensed-font('/path/to/fonts/woff2/files');