Skip to content
/ bc-sans Public

Npm package for official bc gov web font

License

Apache-2.0, OFL-1.1 licenses found

Licenses found

Apache-2.0
LICENSE
OFL-1.1
LICENSE_OFL.txt
Notifications You must be signed in to change notification settings

bcgov/bc-sans

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BC Sans

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.

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.

Download Files

If you are wanting the fonts in different file formats, here are all the options

Integration

npm i --save @bcgov/bc-sans

React

Embed into a root level component import '@bcgov/bc-sans/css/BC_Sans.css'

Typography.js

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 to help us build out the documentation.

About

Npm package for official bc gov web font

Topics

Resources

License

Apache-2.0, OFL-1.1 licenses found

Licenses found

Apache-2.0
LICENSE
OFL-1.1
LICENSE_OFL.txt

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages