Chrome prefers web font over local font

I am not understanding something about the way Chrome loads google fonts. Here is my html:

<html>
<head>
    <title>Montserrat Regular Google Fonts</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
    <p style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 30px;">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt..."
    </p>        
</body>

I have Montserrat Regular installed on my Windows 10 machine. According to this: https://fonts.googleapis.com/css?family=Montserrat, locally installed fonts have priority.

But when I check Dev Tools, Chrome reports under "Rendered Fonts" - Montserrat (Network resource -93 Glyphs)

I tested this on Firefox (reports "Montserrat Regular - System"), and Edge(reports "Montserrat Regular used Montserrat (Local, System,95 chars).

Why is Chrome preferring the network resource over the locally installed font?

Seems to be related to this opened chromium issue.

Linking "http://fonts.googleapis.com/css?family=Special+Elite"

Returns this CSS:
/* latin */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local('Special Elite Regular'), local('SpecialElite-Regular'), url(http://fonts.gstatic.com/s/specialelite/v8/9-wW4zu3WNoD5Fjka35JmzxObtw73-qQgbr7Be51v5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
The src correctly references the font face name. Chrome does not find the locally installed font and falls back to using the web font. Firefox does find the locally installed font.

If you modify the CSS to reference local('Special Elite') (i.e. the font family name), then the behaviour is reversed: Chrome finds the local font and Firefox does not.