Google fonts imports not working on Angular Material production build

Question

By not working I mean font are not available and instead default type is used. This is my code:

@import '~@angular/material/theming';

@import "_variables.scss";

@import url('https://fonts.googleapis.com/css?family=PT+Sans');

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Create the theme object (a Sass map containing all of the palettes).
$tb-theme: mat-light-theme($tb-primary, $tb-accent, $tb-warn);

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
  $font-family: 'PT Sans, sans-serif',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
);

// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);

// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);

// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

Answer 1

I had to change the location of the fonts import from theme file to my _variables.scss file.