如何正确导入Web字体？字体未显示的解决方法

1. 修复CSS文件语法错误 #

你的style.css里包含了HTML的<style>标签，这属于无效的CSS语法，浏览器无法正确解析字体导入规则。修改后的style.css只需保留@import语句：

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

2. 修复HTML语法错误 #

• 第一个<h1>标签的style属性末尾多了一个多余的双引号，导致属性解析失败，删除多余引号：

  <h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>
  

• 第二个<h1>标签后存在无匹配的</h2>闭合标签，删除该错误标签：

  <h1 style="font-family: 'Roboto', sans-serif;">Test</h1>
  

修正后的完整代码 #

HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>
    <h1 style="font-family: 'Roboto', sans-serif;">Test</h1>
  </body>        
</html>

CSS文件（style.css）：

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

修改完成后，浏览器即可正确加载指定字体并应用到对应的<h1>标签上。

内容的提问来源于stack exchange，提问作者Christian Hwang