1

Okay, why is changing the font-family the biggest pain in the butt and yet not very well documented at the same time. I need to change only the font-family for my application's material components. How does one do this? I've seen this: https://material.angular.io/guide/typography but do you really need to redefine everything just to change the font-family?

csyperski
  • 992
  • 3
  • 15
  • 33
  • Well, I can imagine a couple of reasons, perhaps double check first you're not fighting the framework. Does the configuration of the font-family belong into components or isn't it more centrally configured to provide it across all components? -- _"but do you really need to redefine everything just to change the font-family?"_ read this: _"Angular Material's theming APIs are built with Sass. This document assumes familiarity with CSS and Sass basics, including variables, functions, and mixins."_ So what have you tried? Are those terms clear? What is your experience with the tools and languages? – hakre Jan 28 '23 at 16:45
  • Check out this answer: https://stackoverflow.com/questions/43747518/angular-material-and-changing-fonts – Islombek Hasanov Jan 28 '23 at 21:31

1 Answers1

3

Make this change on your global style.scss

@use '@angular/material' as mat;

$open-sans-typography: mat.define-typography-config($font-family: '"Open Sans", sans-serif');

@include mat.typography-hierarchy($open-sans-typography);

$app-theme: mat.define-light-theme((
  typography: $open-sans-typography
));

@include mat.all-component-themes($app-theme);

This solved my issue when I was trying to replace the global font with Open Sans

Soufiane
  • 31
  • 2
  • This worked, thanks! How did you find this solution? I looked everywhere in the Angular Material website and I didn't find it in their typography guide! – Maher Aug 25 '23 at 17:25