Code injection in Ghost allows you to easily add CSS styles, custom fonts, meta tags, and scripts to your site header and footer.

To access the code injection feature, go to Settings → Code Injection area of Ghost admin.

Code added within the Site Header will be output within the <head> </head> of your site, and the code added to the Site Footer will be placed before the closing </body> tag.

When using code injection, any custom CSS or scripts you add will appear on every single page of your site – without having to edit your theme files directly.

Below are a few common examples of CSS that can be used to make changes to your site design, if using our default theme, Casper:

Increase the logo size in the header

<style>
.gh-head-logo img {
    max-height: 32px; /* increase value to increase logo size */
}
</style>

Remove Ghost branding from the footer

<style>
.gh-powered-by {
   display:none;
}
</style>

Remove the publish date

<style>
.post-card-meta-date {
   display:none;
}
</style>

Increase the publication font size

<style>
:root {
    --font-size-base: 1rem; /* increase value to increease font size */
}
</style>

For more examples, check out the Code injection tutorial.