docs/guides/configuration/html_head.md
You can include a custom HTML head file to add additional functionality to your notebook, such as analytics, custom fonts, meta tags, or external scripts. The contents of this file will be injected into the <head> section of your notebook.
!!! note "Run mode only"
Custom HTML head content is only injected in **run mode** (`marimo run`). It is not applied in edit mode. If you need custom styling in edit mode, use [`css_file`](theming.md).
To include a custom HTML head file, specify the relative file path in your app configuration. This can be done through the marimo editor UI in the notebook settings (top-right corner).
This will be reflected in your notebook file:
app = marimo.App(html_head_file="head.html")
Here are some common use cases for custom HTML head content:
<!-- head.html -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<!-- head.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<!-- head.html -->
<meta name="description" content="My marimo notebook" />
<meta name="keywords" content="data science, visualization, python" />
<meta name="author" content="Your Name" />
<meta property="og:title" content="My Notebook" />
<meta property="og:description" content="Interactive data analysis with marimo" />
<meta property="og:image" content="https://example.com/thumbnail.jpg" />
!!! tip "OpenGraph previews"
For common OpenGraph fields (title, description, image), you can also use notebook OpenGraph metadata in script metadata. See [OpenGraph previews](../publishing/opengraph.md).
4. External Scripts and Libraries
<!-- head.html -->
<!-- Load external JavaScript libraries -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<!-- Load external CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />