name: Fonts menu: Private route: /private/fonts

Fonts

A collection of private fonts for use within the Sportsbet design system, currently including:

1. avertaStd - Averta Standard (sportsbet.io)

Usage

1. Import the fontFace into your global stylesheet.

import { avertaStd } from '@heathmont/moon-fonts';
import { createGlobalStyle } from 'styled-components';

const Global = createGlobalStyle(avertaStd.fontFace);

export const App = () => (
  <main>
    <Global styles={avertaStd.fontFace} />
    {/* …app */}
  </main>
);

2. Import crucial font settings into your theme's design tokens for further implementation:

import { avertaStd } from '@heathmont/moon-fonts';

export const yourTheme = {
  // other theme settings…
  fontFamily: avertaStd.fontStack,
  fontWeight: avertaStd.fontWeight,
};