Incorrect button and toolbar font weight

Bug report:

According to the Material Design Typography spec, buttons and the app bar should have medium font weights. However, if the correct Roboto fonts are included, they appear bold. This does not appear on the Angular Material site because the Roboto 500 font weight is not included.

What is the expected behavior?

The button and toolbar typography should have a font weight of 400.

What is the current behavior?

The button and toolbar font weight is set to 500

What are the steps to reproduce?

1. Create an app that uses the toolbar and buttons (see StackBlitz starter)
2. Include the Roboto font weights in index.html <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

What is the use-case or motivation for changing an existing behavior?

To align with material spec.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular: 5.0.0 material: 5.0.0

Is there anything else we should know?

Downstream issue Teradata/covalent#1012

[andrewseguin]

Apologies - read the thread incorrectly, re-opening for investigation

[kyleledbetter]

@andrewseguin I see you closed the issue, but the official Material Design site and Polymer paper toolbar use font-weight:400 for toolbars

https://material.io/guidelines/components/toolbars.html

https://www.webcomponents.org/element/PolymerElements/paper-toolbar/demo/demo/index.html

Are those two wrong?

Also, the Angular Material site isn’t even loading the 500 weight, it uses <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono:300" rel="stylesheet"> which has the appearance of 400

Is that wrong as well?