将本地字体转换为 Google 字体 CDN

Question

我的网站上有一堆 Robot 字体。我想使用 Google 字体 CDN 而不是仅仅出于性能问题。当我将 google CDN url 放入 url("@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap'") 时，我遇到了一个问题，它不起作用。例如，下面的 CSS 使用本地 Robot 字体，我应该将其替换为 Google 字体 CDN。我应该怎么做才能解决这个问题？

 @font-face {
    font-family: roboto regular;
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), url(../webfonts/Roboto-Regular.woff) format('woff');
}
@font-face {
    font-family: roboto medium;
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), url(../webfonts/Roboto-Medium.woff) format('woff');
}
@font-face {
    font-family: roboto bold;
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    src: local('Roboto Bold'), url(../webfonts/Roboto-Bold.woff) format('woff');
}
@font-face {
    font-family: roboto slab regular;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), url(../webfonts/RobotoSlab-Regular.woff) format('woff');
}

roboto 常规 400
roboto 中等 500
roboto 粗体 600
roboto slab 常规 400

Answer 1

您可以 link 在您的 HTML 中，像这样：

<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=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

或将其导入您的 CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap');

然后像这样将其应用于您的 css：

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;

然后您可以删除 @font-face 实现。

来源：https://fonts.google.com/share?selection.family=Roboto%20Slab%7CRoboto:wght@400;500;700

将本地字体转换为 Google 字体 CDN

Convert local font to Google Fonts CDN

css

font-face

webfonts

google-webfonts

roboto