How do I change the font family of Microsoft Graph Toolkit components?

Adding direct styling like this does not work:

mgt-person{
  font-family:"Roboto" !important;
}

Documentation does not mention being able to change the font style whatsoever.

Thanks for identifying that gap in our documentation.

Microsoft Graph Toolkit components are web components, so setting a CSS rule like that doesn't make any change to the styles inside the shadow root.

MGT makes heavy use of design tokens and CSS custom properties aka variables. In MGT v3.0.0 and upwards the way to set the font in use is via the --body-font custom property.

e.g.

body {  
  ---body-font: 'Roboto';
}

Using the body selector here ensures that all components will receive the customized value, as opposed to needing to set it for each component you use.