angularsassangular-materialmaterial3angular-material-theming

How do I use a font other than Roboto?


I am just starting on angular 3 and have the bugs worked out. However, I am having an issue trying to get different fonts and typography to work properly

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>StateLineRodz</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body  class="mat-typography mat-app-background">
 <app-component-test></app-component-test>
  <app-root></app-root>
</body>
</html>

My style.scss

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$blue-palette,
      tertiary: mat.$magenta-palette,
    ),
  )
);

html,body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
  @include mat.all-component-themes($theme);
}



:host {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "stateLineRodz": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/state-line-rodz",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss",
              "src/m3-theme.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "stateLineRodz:build:production"
            },
            "development": {
              "buildTarget": "stateLineRodz:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss",
              "src/m3-theme.scss"           
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

When I load the page, I always get the same font I've tried to load the page with fonts that dont exist and no luck, just compiles and say "OK"

I have no more clues on guessing this stuff.


Solution

  • First make sure you add the font to the index.html.

      ...
      <!-- custom font -->
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link
        href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Open+Sans:wght@300&display=swap"
        rel="stylesheet"
      />
    </head>
    

    After this, in styles.scss, you have to first define the typography-object. the valid values are.

    _config-validation.scsss

      $allowed: (
        brand-family,
        plain-family,
        bold-weight,
        medium-weight,
        regular-weight,
        use-system-variables,
        system-variables-prefix
      );
    

    So define the same at the top with the property name $typography-config.

    $typography-config: (
      // <- notice!
      plain-family: 'Edu AU VIC WA NT Pre',
      // <- notice!
      brand-family: 'Edu AU VIC WA NT Pre',
      // <- notice!
    ); // <- notice!
    

    Then map this definition to the define-theme, typography property, like shown below.

    $theme: mat.define-theme(
      (
        color: (
          theme-type: light,
          primary: mat.$azure-palette,
          tertiary: mat.$blue-palette,
        ),
        typography: $typography-config,
        // <- notice!
      )
    );
    

    Even after these changes you will not see the type being applied, we have to call the method mat.typography-hierarchy to apply the typography to the components.

    @include mat.core();
    @include mat.color-variants-backwards-compatibility($theme);
    @include mat.typography-hierarchy($theme); // <- notice!
    

    Full Code:

    @use '@angular/material' as mat;
    
    $typography-config: (
      // <- notice!
      plain-family: 'Edu AU VIC WA NT Pre',
      // <- notice!
      brand-family: 'Edu AU VIC WA NT Pre',
      // <- notice!
    ); // <- notice!
    
    $theme: mat.define-theme(
      (
        color: (
          theme-type: light,
          primary: mat.$azure-palette,
          tertiary: mat.$blue-palette,
        ),
        typography: $typography-config, // <- notice!
      )
    );
    
    body {
      font-family: Roboto, 'Helvetica Neue', sans-serif;
      margin: 0;
      padding: 30px;
      height: 100%;
    
      @include mat.all-component-themes($theme);
    }
    
    html {
      height: 100%;
    }
    
    @include mat.core();
    @include mat.color-variants-backwards-compatibility($theme);
    @include mat.typography-hierarchy($theme); // <- notice!
    

    Stackblitz Demo