Ghost CMS Code Injection: How to Add CSS, JS, and More
Ghost gives you a lot of control out of the box. But when you need to tweak something the admin UI does not cover — a custom font, an analytics snippet, a small visual fix — Code Injection is where that actually happens.
It is one of the most useful features in Ghost CMS, and most people underuse it. Here is how it works and what you can do with it.
What Code Injection Does in Ghost CMS
The feature does exactly what the name says. You paste code into two global fields, and Ghost drops it into every page on your site automatically.
No theme editor. No SSH access. No deployment pipeline. For smaller customizations, this is almost always the faster path.
You can find it under Settings → Code Injection in your Ghost admin panel. Ghost’s own documentation on using Code Injection covers the basics well, but there is more nuance worth knowing before you start pasting things in.
The Two Injection Areas and Why They Are Different
The Code Injection page has two text fields: Site Header and Site Footer. They are not interchangeable.
Site Header drops your code inside the <head> tag, after any styles and scripts your theme already loads. This is the right place for CSS, web font imports, and anything that needs to be parsed before the page renders visually.
Site Footer places your code just before the closing </body> tag. JavaScript belongs here. Loading scripts in the footer means the HTML content renders first, which avoids the page stalls you get when heavy scripts block the initial load. If you have ever seen a site take three seconds to show any text at all, a render-blocking script in the head is usually why.
Both fields affect every page on your site. There is no way to target individual posts or pages from this interface. For page-specific code, you would need to use Ghost’s post-level code injection, which is available in the post editor under the settings panel.
Adding Custom Fonts with CSS
One of the most common reasons people open Code Injection is to add a typeface that the theme does not include by default.
The process is straightforward. Go to Google Fonts, pick a font, and grab the <link> embed code. Paste that into Site Header first. Then add a second block right below it with your CSS wrapped in a <style> tag:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Lora', serif;
}
</style>Worth knowing: if you are loading multiple Google Fonts weights, be selective. Every additional weight is an extra request and adds to page load time. Most sites need two or three weights at most. Loading six is a performance decision you will feel later.
Adding JavaScript and Third-Party Scripts
Analytics tools, cookie banners, chat widgets, and similar services all work through Code Injection. Paste the script tag they provide into Site Footer, not the header.
The placement matters more than most documentation makes clear. Scripts in the footer load after the page content is already in place, so your visitors see something immediately rather than waiting for the script to finish before anything renders.
A typical analytics snippet looks like this:
<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>If a third-party tool tells you to add code to the <head>, that goes in Site Header. If the instructions say “before the closing body tag,” that is Site Footer. When instructions are vague, footer is the safer default for JavaScript.
Practical Use Cases Beyond the Basics
Most tutorials stop at fonts and analytics. These are a few less obvious things Code Injection handles well.
Custom meta tags. If you need to add a site verification tag for Google Search Console or Pinterest, those go in Site Header as plain <meta> elements. Ghost does not expose a dedicated field for these, so Code Injection is the official path.
Minor theme overrides. Found a small styling issue in your theme but do not want to fork it just to change one CSS rule? A quick override in Site Header fixes it without touching the theme files. Keep in mind that if the theme updates later, it may conflict with your override. Document what you added and why.
Structured data markup. Adding JSON-LD for schema.org types that Ghost does not generate natively is entirely possible through Site Footer. This is a real SEO lever that many Ghost sites leave unused.
For most people reading this, the font plus analytics combination is where they start. That is fine. But Code Injection scales up further than that if you need it to.
How to Choose What Goes Where
A quick reference for the most common cases:
- Site Header: CSS,
<style>blocks, font<link>tags, meta tags, Open Graph overrides - Site Footer: JavaScript, analytics, chat widgets, structured data, cookie banners
If you are unsure, ask yourself: does this need to affect how the page looks before it renders? Header. Does it run after the page loads? Footer.
Keeping Your Code Injection Clean
One practical note: Ghost does not validate what you paste in. A malformed <style> tag or a JavaScript error in Site Footer can break your site silently, or at least break the feature you were trying to add.
Before pasting anything, test it in a staging environment if you have one. If you are on a managed Ghost host like Ghost(Pro), they do not offer a built-in staging setup on lower plans. In that case, test CSS changes in browser dev tools first, then paste the finalized version.
Also, keep your Code Injection fields readable. Add a comment above each snippet explaining what it is and when you added it. Six months from now, you will not remember why there are three different script tags in your Site Footer.
The feature is simple. Used carefully, it saves a significant amount of time.