This package includes the ILO's brand fonts and typeface declarations. Fore more information about typography at the ILO, see the ILO Brand Hub.
Simply add the project as a dependency in your package.json and then import the font-face declarations.
// SCSS
@import "~@ilo-org/fonts";// JavaScript with Webpack
import "~@ilo-org/fonts";Then, in any css file
.my-type-class {
font-family: "Overpass", sans;
font-weight: normal;
font-style: normal;
}If you need to import the fonts for Google for some reason, you can also do this:
/* CSS */
@import url("@ilo-org/fonts/font-css/fonts-google.css");This package includes a subset of Overpass and Noto Sans fonts used in ILO projects.
| font-family | font-weight | font-style | file |
|---|---|---|---|
| "Overpass" | normal | normal | Overpass-Regular |
| "Overpass" | normal | italic | Overpass-Italic |
| "Overpass" | 300 | normal | Overpass-Light |
| "Overpass" | 700 | normal | Overpass-SemiBold |
| "Overpass" | 700 | italic | Overpass-SemiBoldItalic |
| "Noto Sans" | normal | normal | NotoSans |
| "Noto Sans" | normal | italic | NotoSans-Italic |
| "Noto Sans" | 700 | normal | NotoSans-Bold |
| "Noto Sans" | 700 | italic | NotoSans-BoldItalic |
All fonts-face declarations include files in the following formats:
.eot.woff.woff2.ttf
This pacakge includes a directory named fonts-css which contains raw css for importing font stacks. Included as of now:
| character set | font-family |
|---|---|
| Latin | Noto Sans |
| Latin | Overpass |
| Arabic | Noto Sans Arabic |
(Note there is no Arabic character set for Overpass).
Note that both CSS imports refer to their character set's font-family as "Noto Sans" in the CSS. This allows switching out just the font import files while loading CSS from the styles pacakge without having to load an entirely new version of styles package CSS. In an example font stack in an HTML <head> you might have the following logic (pseduo-code):
if is latin
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" />
else
<link rel="stylesheet" href="css/fonts-{{language}}.css" type="text/css" media="screen" />
endif
This pacakge also includes Noto Sans Arabic.
| font-family | font-weight | font-style | file |
|---|---|---|---|
| "Noto Sans" | normal | normal | NotoSansArabic |
| "Noto Sans" | 700 | normal | NotoSansArabic-Bold |
Chinese and Japanese webfonts are very large and not often used. As such, when using the ILO Design System in a Chines or Japanese website, we recommend using the following system fonts:
PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif
Noto Sans CJK JP, Yu Gothic, Hiragino Sans
Note: These font-family declarations are already included in the @ilo-org/styles package. You will probably not have to make them yourself.