本地加载字体系列时出现问题

Question

我目前正在从 google 的 CDN 加载我的字体系列，如下所示：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap" rel="stylesheet">

但我现在需要在本地加载它们以优化我的网络速度。这是我尝试过的：

@font-face {
    font-family: Inter;
    src:url("../fonts/Inter-Medium.ttf");
}

@font-face {
    font-family: Inter;
    src:url("../fonts/Inter-Semibold.ttf");
}

body {
    font-family: 'Inter', sans-serif !important;
}

但这并不像从谷歌的 CDN 加载时那样工作。我可以看到它仅适用于重量 500 的情况，但不适用于重量为 600 的情况。一些帮助将不胜感激！

Answer 1

我描述了我为成功连接到谷歌字体而采取的所有操作。

1. 我下载了 fonts.google.com（下载按钮位于右上角）内文本下载系列。
2. 我将所有文件添加到我的项目中。
3. 我连接了文件方向，HTML/CSS。

@font-face{
  font-family: Name;
  src: url('Inter-VariableFont_slnt,wght.ttf');
}
p{
  font-family: Name;
}

<p>TEST</p>

4. 您可以输入任何名称，而不是名称。
5. 之后，一切正常。

屏幕代码：

这就是一开始的样子：

之后：