MIxed Content bug requesting font stylesheet with Next js

I'm trying to add font to my website through Nextjs in a React component but getting the following error :

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.

I'm not sure why I'm getting this error since I'm making a https request via the Head like so:

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>
  )
}