The Head component allows you to add metadata and external resources to your document. It can be used to import fonts and icon libraries. It works similarly to Next.js’s Head component, which hoists the contents to the top of the HTML document.

​
Usage

Place the Head component inside your document, typically near the top. You can include various HTML elements that you want to be added to the <head> section of your page.

import Document from "@htmldocs/core";
import Head from "@htmldocs/core";

export default function MyDocument() {
  return (
    <Document>
      <Head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
      </Head>
      {/* Rest of your document content */}
    </Document>
  );
}

The Head component doesn’t render any visible content.

It only affects the document’s <head> section.

​
Examples

​
Adding a Custom Font

<Head>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
</Head>

​
Including an External Script

<Head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</Head>
PageSpacer