Я так понимаю, это ошибка Chrome, что интересно, потому что я использую версию Chromium, и она отлично работает. Я бы рекомендовал использовать внутренний CSS (а не внешние таблицы стилей) под тегом <style> в вашем разделе <head> (где вы также должны ссылаться на <link> на шрифт) и добавить CSS, назначенный *, как показано ниже, к нему:
* {
-webkit-font-smoothing: antialiased;
}
body {
font-family: 'Montserrat', sans-serif;
}
h1 {
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3 {
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<h1>Title</h1>
<h3>Title</h3>
</body>
В качестве альтернативы есть также метод @import, который вы должны найти серым цветом в качестве правой опции в разделе «Встроить» ссылки на Google Fonts. Однако это должно быть вашим второстепенным вариантом, потому что, как отмечает здесь @igriorik , эти правила откладывают загрузку включенного ресурса до тех пор, пока файл не будет извлечен, что может привести к битым шрифтам на некоторых платформах.
Однако для этого вы должны добавить правила @import под тегом <style> и ссылаться на него в нужном элементе. В вашем случае (шрифтом Montserrat):
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
font-family: 'Montserrat', sans-serif;
}
h1 {
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3 {
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
<h1>Title</h1>
<h3>Title</h3>
Сообщите мне, если это не сработает!