My application was previously on Angular 10. I upgraded to Angular 11 with no issues--then immediately went to Angular 12 afterwards. Everything compiles fine and the app works fine. The only issues I have ran into are my fonts are now different.

By different--I mean that the Google Web Font I am using "Open Sans"--is lighter and not as bold as it was before. I can pull up the production version of my app (Angular 10) next to my local version (angular 12)--and inspect the elements and they look identical. They are both using the font and its loading the font face fine--the main difference is the font weight. The Angular 10 version of my fonts are much bolder. I can put the Angular 12 font-weight to 900 and its still not as bold as the regular weight previously. I did NOT change the Font Face at all. Its still the same import.

I am using Bootstrap and Angular Material (version 12). I am using a custom Typography:

$custom-typography: mat.define-typography-config(
  $font-family: 'Open Sans, sans-serif',
  $display-4: mat.define-typography-level(112px, 112px, 300),
  $display-3: mat.define-typography-level(56px, 56px, 400),
  $display-2: mat.define-typography-level(45px, 48px, 400),
  $display-1: mat.define-typography-level(34px, 40px, 400),
  $headline: mat.define-typography-level(24px, 32px, 400),
  $title: mat.define-typography-level(20px, 32px, 500),
  $subheading-2: mat.define-typography-level(16px, 28px, 400),
  $subheading-1: mat.define-typography-level(15px, 24px, 400),
  $body-2: mat.define-typography-level(14px, 24px, 500),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
  $input: mat.define-typography-level(inherit, 1.125, 400),
);

@include mat.typography-hierarchy($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 mat.all-component-typographies($custom-typography);

@include mat.core($custom-typography);

The code above hasn't changed apart from the syntax from the automatic migration during the upgrade. I can inspect various elements on my pages and all of the font weights just LOOK wrong--even though the code behind the page is the same.

Below is a small comparison. The LEFT is current production on Angular 10--and RIGHT is current local on Angular 12. It is a very subtle font weight issue that I can't figure out. Any help?