Google字体不再支持下载文件？

Question

我已将 google 字体的 .ttf 文件下载到本地 css 文件夹，但似乎无法正确加载它们。我尝试过这些方法：

CSS

@import url('./css/css?family=Cabin+Condensed:400,500,600,700');

@font-face {
    font-family: 'Cabin Condensed';
    font-style: normal;
    font-weight: 700;
    src: local('Cabin Condensed') format('truetype');
}

body, html {
    font-family: 'Cabin Condensed', sans-serif;
}

HTML

<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">

我没有收到任何错误，但也没有显示字体。奇怪的是，official docs 甚至没有提到本地字体。

Answer 1

在我看来问题是使用 local 路径需要在本地安装字体。

尝试删除 @import 并将 src: url 的后备添加到您的 src: local:

@font-face {
    font-family: 'Cabin Condensed';
    src: local('Cabin Condensed'), url(<path to the TTF file>);
}

例如：

@font-face {
    font-family: 'Cabin Condensed';
    src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}

Google字体不再支持下载文件？

Google fonts no longer supports downloaded files?

css

truetype

google-fonts