Code Injection

Add custom CSS, JavaScript and other code to your site without modifying theme files. Changes made through Code Injection are kept when you update the theme.

Accessing Code Injection#

1. Go to Settings → Code injection
2. You'll see two sections:
   • Site Header, code added to <head> on every page
   • Site Footer, code added before </body> on every page

Adding Custom CSS#

To add custom styles, use the Site Header section:

<style>
  /* Your custom CSS here */
  html[data-font-size] .content {
    font-size: 18px;
  }
</style>

In Break the text of a post or a page sits in the .content element. The html[data-font-size] part is needed because the theme sizes that text from the reader's text size choice. A fixed size like the one above turns that choice off for the body text.

Common CSS Customizations#

Change the width of the reading column:

<style>
  :root {
    --container-small--width: min(700px, calc(100% - 2rem));
  }
</style>

This is the column that holds the text of posts and pages. Readers can otherwise switch it between two widths in the settings panel, and a value set here replaces their choice. See Reading Preferences.

Customize fonts:

The heading and body fonts follow the typography you choose in ⛭ Settings → Design & branding, so try that first. To load a font from somewhere else, such as Google Fonts:

<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=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
<style>
  :root {
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
  }
</style>

The labels, dates and buttons use a monospaced font of their own, set by --font-mono.

Adding Custom JavaScript#

Add JavaScript to the Site Footer section:

<script>
  // Your custom JavaScript here
  console.log('Custom script loaded');
</script>

Loading External Scripts#

To load external libraries:

<script src="https://example.com/library.js"></script>
<script>
  // Use the library after it loads
</script>

Analytics & Tracking#

Google Analytics#

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXX');
</script>

Plausible Analytics#

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

See Analytics for more options. For comment systems, see Comments.

Post-Specific Code Injection#

You can also add code to a single post or page:

1. Open the post in the editor
2. Click the settings gear icon (⚙️)
3. Scroll to Code injection
4. Add Header or Footer code for that post only

Best Practices#

• Test thoroughly. Try custom code on a staging site first
• Keep it minimal. Too much custom code can slow down your site
• Comment your code. Note what each piece of custom code does
• Back up before changes. Save your code injection content before you edit it

Debugging#

If your custom code isn't working:

1. Check the browser console for errors (F12 → Console)
2. Verify the code is in the correct section (header or footer)
3. Make sure script tags are properly closed
4. Check for conflicting code