使用 Next js 请求字体样式表的混合内容错误

Question

我正在尝试通过 React 组件中的 Nextjs 将字体添加到我的网站，但出现以下错误：

Mixed Content: The page at 'https://example.com/page/subpage' was loaded over HTTPS,
but requested an insecure stylesheet 'http://allfont.net/cache/css/bookman-old-style-bold.css'.
This request has been blocked; the content must be served over HTTPS.

我不确定为什么会收到此错误，因为我正在通过 Head 发出 https 请求，如下所示：

import Head from "next/head";
export default function page() {
   return (
      <Head>
        <link
          href="https://allfont.net/allfont.css?fonts=bookman-old-style-bold"
          rel="stylesheet"
          type="text/css"
        />
      </Head>
  )
}

Answer 1

            <link rel="preconnect" href="https://allfont.net" />
            <link
                href="https://allfont.net/allfont.css?fonts=bookman-old-style-bold"
                rel="stylesheet"
                type='text/css'
            />