cssangularangular-materialangular-material-theming

angular material typography - customisation

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

Solution

  • 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