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?

回答1:

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.

来源：https://stackoverflow.com/questions/51021201/chrome-prefers-web-font-over-local-font

标签

google-chrome

google-font-api

google-fonts