1.0.0 • Published 11 months ago

@ilo-org/fonts v1.0.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
11 months ago

ILO Design System - Fonts Package

This package includes the ILO's brand fonts and typeface declarations. Fore more information about typography at the ILO, see the ILO Brand Hub.

Usage

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;
}

As Google Fonts

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");

Fonts included

This package includes a subset of Overpass and Noto Sans fonts used in ILO projects.

font-familyfont-weightfont-stylefile
"Overpass"normalnormalOverpass-Regular
"Overpass"normalitalicOverpass-Italic
"Overpass"300normalOverpass-Light
"Overpass"700normalOverpass-SemiBold
"Overpass"700italicOverpass-SemiBoldItalic
"Noto Sans"normalnormalNotoSans
"Noto Sans"normalitalicNotoSans-Italic
"Noto Sans"700normalNotoSans-Bold
"Noto Sans"700italicNotoSans-BoldItalic

Formats

All fonts-face declarations include files in the following formats:

  • .eot
  • .woff
  • .woff2
  • .ttf

Raw CSS Import files

This pacakge includes a directory named fonts-css which contains raw css for importing font stacks. Included as of now:

character setfont-family
LatinNoto Sans
LatinOverpass
ArabicNoto 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

Non-Latin Languages

Arabic

This pacakge also includes Noto Sans Arabic.

font-familyfont-weightfont-stylefile
"Noto Sans"normalnormalNotoSansArabic
"Noto Sans"700normalNotoSansArabic-Bold

Chinese & Japense

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:

Chinese

PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif

Japanese

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.

1.0.0

11 months ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.3

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

2 years ago

0.0.6

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago