Question

首先，我要感谢本网站中的所有杰出人士。没有SO的帮助，我将会迷失。

我正在尝试从Google字体中引用字体。问题是当我按下更改时，字体将显示在控制台上，但不会在实际网站上呈现。

这是我导入代码的方式

 @import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');

.text {

font-family: 'poppins-bold', sans-serif !important;
font-size: 6.3rem;
line-height: 1.333;
margin-top: 0;
color: #FFFFFF;
text-align: center;

}

访问网站here，亲自看看。

有什么办法解决这个问题？

Answer 1

您可以尝试在index.html（主html文件）中添加以下链接，然后可以将font-family用作“ poppins”。

// configure your URLs by weather (using the weather description in this case)
const urls = {
    'clear sky': 'https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4',
    'few clouds': 'https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4'
};

// function that loads the video based on a URL
function loadVideo(url) {
    const v1 = document.createElement('VIDEO');
    v1.setAttribute('src', url);
    v1.setAttribute('class', 'v1');
    document.body.appendChild(v1);
    v1.autoplay = true;
    v1.load();
}

// call the function with the response from your API
loadVideo(urls[response.weather[0].description]);

（您必须使用<>将其包装为标签）

Answer 2

只需添加

    <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
</style>

然后在css里面

   *{
font-family: 'Poppins', sans-serif;
}

字体家族“ Poppins”在加载时无法在我的网站上正常工作

2 个答案: