React中JSX内联Google字体失效问题咨询

嘿各位React开发者，我碰到了一个有点奇怪的问题，想请大家帮忙看看！

我已经在HTML的head里正确引入了Google字体Jacquard 12，而且如果我在CSS文件里单独写一个类，把这个字体赋值给font-family，元素是能正常显示这个字体的。但一旦我在JSX里用内联样式对象来设置这个字体，它就完全不生效了——不过其他样式属性比如文字变红是正常的，就字体这一项出问题。

先给大家看看我的代码：

HTML 入口文件 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</title>
    <link rel="stylesheet" href="/styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap"
      rel="stylesheet"
    />
  </head>
 
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

JSX 代码 #

import React from "react";
import { createRoot } from "react-dom/client";
 
const customisedStyle = {
  color: "red",
  fontFamily: "Jacquard 12, sans-serif",
  fontWeight: 900,
};
 
const root = createRoot(document.getElementById("root"));
root.render(<h1 style={customisedStyle}>这是测试文本</h1>);

我已经确认字体链接是有效的，CSS类里用font-family: 'Jacquard 12', sans-serif;完全没问题，但内联样式里这么写就没反应。有没有人碰到过类似的情况？或者知道我哪里写错了？

备注：内容来源于stack exchange，提问作者Mohamed Clio