如何异步导入本地字体？

Question

我最近开始在本地托管我的网站使用的几种字体。在我这样做之前，我从谷歌字体异步加载它们以避免加载阻塞，但现在我不知道如何去做。

之前的 HTML 语法：

<link rel="import" href="//fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600&display=swap" async>

之后的 CSS 语法：

@font-face {
    font-family: "Titillium Web";
    src: url("../fonts/titillium-web-300.woff2") format('woff2');
    font-weight: lighter;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "Titillium Web";
    src: url("../fonts/titillium-web-400.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "Titillium Web";
    src: url("../fonts/titillium-web-600.woff2") format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

仅使用交换仍然会导致阻塞（链接关键请求）：

所以我需要像以前一样完全异步加载。我还没有找到在 CSS 中异步加载的方法，并且我不确定如何在使用 HTML 加载时正确定义字体。我能做些什么？