Mi aplicación estaba previamente en Angular 10. Actualicé a Angular 11 sin problemas, luego inmediatamente fui a Angular 12 después. Todo compila bien y la aplicación funciona bien. Los únicos problemas con los que me he encontrado son que mis fuentes ahora son diferentes.

Por diferente, quiero decir que la fuente web de Google que estoy usando "Open Sans" es más ligera y no tan audaz como antes. Puedo abrir la versión de producción de mi aplicación (Angular 10) junto a mi versión local (angular 12) e inspeccionar los elementos y se ven idénticos. Ambos están usando la fuente y están cargando bien la fuente; la principal diferencia es el peso de la fuente. La versión Angular 10 de mis fuentes es mucho más audaz. Puedo poner el peso de fuente Angular 12 en 900 y todavía no es tan audaz como el peso normal anterior. NO cambié la fuente en absoluto. Sigue siendo la misma importación.

Estoy usando Bootstrap y Angular Material (versión 12). Estoy usando una tipografía personalizada:

 $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);

El código anterior no ha cambiado aparte de la sintaxis de la migración automática durante la actualización. Puedo inspeccionar varios elementos en mis páginas y todos los pesos de las fuentes PARECEN incorrectos, aunque el código detrás de la página es el mismo.

A continuación se muestra una pequeña comparación. La IZQUIERDA es la producción actual en Angular 10, y la DERECHA es local actual en Angular 12. Es un problema de peso de fuente muy sutil que no puedo resolver. ¿Alguna ayuda?