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. B.C. Government is currently working to include Indigenous languages in government records, systems and services. Find out what steps are being taken and how you can stay informed at Including Indigenous languages in government records, systems and services - Province of British Columbia.
Font weights and styles included:
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
npm i --save @bcgov/bc-sans
Embed into a root level component
import '@bcgov/bc-sans/css/BC_Sans.css'
See Typography.js installation instructions here
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;
### Why are there two similar CSS files in this package?
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.
### Contributing
Integrating it differently? [Create a pull request](https://github.com/bcgov/bc-sans/pulls) to help us build out the documentation.