angular material typography - customisation

Question

In customizing my angular material theme's typography. I understand that one can override the default font with their own font like so:

$custom-typography: mat-typography-config(
  $font-family: 'Lato, monospace'
);

Although, I noticed that the source code shows two fonts , the default Roboto, and then Helvetica is also included in inverted commas:

$font-family: 'Roboto, "Helvetica Neue", sans-serif',

Is that a secondary font? I would like if I could choose a secondary font. If this is not a secondary font, what is it?

thanks

Answer 1

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Copied from w3schools