Customise Fonts

On Google Fonts, choose all the fonts you'd like to add. Ideally, each font should support 300, 400 and 500 font weights to support the various font weights used in Angular Material components. Angular inlines fonts loaded via Google Fonts for performance.

If you'd like to use your proprietary fonts, add them to the public folder and index.html and/or add the @font-face to styles.scss. Ensure the CSP (Content Security Policy) rules in index.html are updated accordingly.

Let's use IBM Plex Serif.

Step 1: Get the embed code for the three weights of all fonts and add it in the head element in index.html. Google Fonts can generate a combined link element for all your fonts or you can add one for each font.

Choosing a font on Google Fonts

index.html

<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&display=swap"
  rel="stylesheet"
/>

Step 2: Use the font-family values shown above to create variables for each font in styles.scss. Be careful of the enclosing quotes.

styles.scss

$ibm-plex-serif-typography: mat.define-typography-config(
  $font-family: '"IBM Plex Serif", serif',
);

Step 3: If updating the default font, replace the typography property in the $default-theme variable and include the typography-hierarchy mixin for this font in the body element.

styles.scss

$default-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$brown-palette, 500),
      accent: mat.define-palette(mat.$amber-palette, 500),
    ),
    typography: $ibm-plex-serif-typography,
  )
);

body {
  @include mat.typography-hierarchy($ibm-plex-serif-typography);
}

Step 4: Update the Available Font type.

available-font.type.ts

export type AvailableFont = 'ibm-plex-serif' | 'noto-sans-arabic';

Step 5: Update the Default Font constant.

default-font.constant.ts

export const DEFAULT_FONT: AvailableFont = 'ibm-plex-serif';

Step 6: Update the Language Options constant.

language-options.constant.ts

export const LANGUAGE_OPTIONS: LanguageOption[] = [
  {
    directionality: 'ltr',
    font: 'ibm-plex-serif',
    icon: 'translate',
    nameKey: 'english',
    value: 'en',
  },
  {
    directionality: 'rtl',
    font: 'noto-sans-arabic',
    icon: 'translate',
    nameKey: 'arabic',
    value: 'ar',
  },
];

Done!

Jet in custom font