Fonts
Self-hosted fonts with @font-face CSS. The design tokens name them.
Use
Import the fonts your brand uses, once, at the app’s entry.
@import '@earendil-works/elanor-fonts/mallos-serif.css';
@import '@earendil-works/elanor-fonts/commit-mono.css';Lefos: import departure-mono.css instead of commit-mono.css.
--primitive-font-family-sans-serif names Inter, which is not included.
Mallos Serif
Serif for text and headings.
Sphinx of black quartz, judge my vow.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 &@#%?!(){}[]
- 400
- Sphinx of black quartz, judge my vow.
- 700
- Sphinx of black quartz, judge my vow.
- 400 italic
- Sphinx of black quartz, judge my vow.
- 700 italic
- Sphinx of black quartz, judge my vow.
- CSS family:
Mallos Serif- Stylesheet:
mallos-serif.css- Files:
- 2 WOFF2 files, 59–69 KB each
- Radius tokens:
- Body, Interface, App headings, Marketing headings
--semantic-font-family-prose,--semantic-font-family-ui - Elanor tokens:
- Body, Interface, App headings, Marketing headings
--semantic-font-family-prose,--semantic-font-family-ui - Lefos tokens:
- Body, Marketing headings
--semantic-font-family-prose - License:
- SIL OFL 1.1
Commit Mono
Monospace for code.
if (count >= 10) stop();
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 &@#%?!(){}[]
- 300
- if (count >= 10) stop();
- 400
- if (count >= 10) stop();
- 700
- if (count >= 10) stop();
- CSS family:
Commit Mono- Stylesheet:
commit-mono.css- Files:
- 3 WOFF2 files, 47–48 KB each
- Desktop:
- OTF 300, 400, 700
- Radius tokens:
- Code
--semantic-font-family-code - Elanor tokens:
- Code
--semantic-font-family-code - License:
- SIL OFL 1.1
DepartureMono
Pixel monospace for Lefos.
Pack my box with five dozen liquor jugs.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 &@#%?!(){}[]
- 400
- Pack my box with five dozen liquor jugs.
- 700, synthesized
- Pack my box with five dozen liquor jugs.
- CSS family:
DepartureMono- Stylesheet:
departure-mono.css- Files:
- 1 WOFF2 file, 22 KB
- Lefos tokens:
- Body, Interface, Code, App headings
--semantic-font-family-code,--semantic-font-family-ui - License:
- SIL OFL 1.1