Это связано с ошибкой в Linux (возможно, только с Ubuntu).
Как я ее решил: URL-адрес Googlefonts извлекает простой текст правил css font-face (вы можете увидеть это, если просто вызватьэто из браузера).Они содержат srcs, где искать шрифты в порядке приоритета.Googlefonts сначала ищет локальные шрифты, а затем, если они не существуют, извлекает их из удаленных местоположений:
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v13/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
unicode-range: U+0000-00FF, ...
}
Как правило, это хорошая идея, поскольку извлечение уже установленных в системе шрифтов не требуется и замедляет работу.загрузка страницы вниз.Однако в Ubuntu есть известная ошибка, которая приводит к загрузке неверно установленных шрифтов: https://bugs.launchpad.net/ubuntu/+source/fonts-ubuntu/+bug/1512111 Имена шрифтов в Googlefonts на самом деле правильные, но по какой-то причине ОС не обрабатывает их правильно.Таким образом, у Google нет способа исправить это с их стороны.
Мое решение состоит в том, чтобы просто удалить локальные srcs, чтобы немедленно получить шрифты с удаленного компьютера.(Мне действительно интересно, почему Google не предлагает вариант «пропустить локальные шрифты» по умолчанию, возможно, они не хотят тратить свои ресурсы впустую.) В этом случае это, вероятно, даже не имеет значения с точки зрения производительности, потому что все другие системы, кроме Ubuntuв любом случае не используйте его в качестве локального шрифта.
Вот как я пропускаю локальные шрифты, используя Javascript:
fetch('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700')
// get browser/OS specific googlefont font-face file and convert to string to make adjustments
.then(res => res.text())
.then(googleFonts => {
// remove "local" src locations to force using remote (or browser-cached) fonts (no locally installed system fonts)
googleFonts = googleFonts.replace(/local(.*),\s/g, '')
Примечание. Важно не просто копировать CSS, когда вы смотрите наэто в браузере, потому что оно варьируется в зависимости от браузера / ОС - вот в чем смысл Googlefonts.
Примечание: я не уверен, как использовать это в HTML, но учитывая, что JS генерирует простой текст, он долженлегко разобраться с @ssort из файла CSS.