Chrome prefers web font over local font

2019-07-27 07:46发布

站内问答 / 前沿技术
2512 1 4

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条回答
Animai°情兽
2楼-- · 2019-07-27 08:08

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)