The standard font for B.C. Government digital services is BC Sans. BC Sans is an open source font family, and is a modified version of Noto Sans, developed by Google. BC Sans includes modifications to support Indigenous languages in British Columbia.
npm install @bcgov/bc-sansThe standard font for B.C. Government digital services is BC Sans. BC Sans is an open source font family, and is a modified version of Noto Sans, developed by Google. BC Sans includes modifications to support Indigenous languages in British Columbia.
Font weights and styles included:
* BC Sans Regular - 400
* BC Sans Italic - 400
* BC Sans Bold - 700
* BC Sans Bold Italic - 700
* BC Sans Light - 300
* BC Sans Light Italic - 300
Typography standards for print are on the B.C. Visual Identity Program page.
If you are wanting the fonts in different file formats, here are all the options
* Download all font files (.eot, .ttf, .otf, .woff, .woff2)
* Download files for your local computer (.otf, .ttf)
npm i --save @bcgov/bc-sans#### React
Embed into a root level componentimport '@bcgov/bc-sans/css/BC_Sans.css'
#### Typography.js
>See Typography.js installation instructions here
``js
import Typography from 'typography';
import '@bcgov/bc-sans/css/BC_Sans.css';
const typography = new Typography({
baseFontSize: '16px',
baseLineHeight: 1.25,
headerFontFamily: ['BC Sans', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'],
bodyFontFamily: ['BC Sans', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'],
scaleRatio: 2.074,
});
export default typography;
`
For new projects, you only need to include one of the two CSS files: css/BC_Sans.css. Then, reference BC Sans in your CSS font-family rules.
Originally, this package shipped with just css/BCSans.css. This file uses BCSans (no space) as the font-family name in its @font-face declarations. Lots of existing application code references this name. But the metadata in the font files use BC Sans (with a space) for the font family name. As a result, UI design tools like Figma output code using BC Sans from the font files. This generated code would not work directly with this package without manual intervention.
css/BC_Sans.css uses BC Sans for its CSS font-family names. This matches the family metadata fields in the font files. Font style code generated from Figma works with css/BC_Sans.css. New projects should use css/BC_Sans.css` for smoothest designer to developer hand-off. For existing projects, there is no need to switch.
Integrating it differently? Create a pull request to help us build out the documentation.