G Ghost

How to customize theme colors and fonts on Ghost

intermediate 8 min read Updated 2026-03-18
Quick Answer

Ghost theme customization can be done through the admin panel's design settings for basic changes, or by editing CSS files for advanced modifications. Most themes support color and font customization through built-in options or custom CSS injection.

Try Ghost Full Ghost Review

Prerequisites

  • Admin access to Ghost site
  • Basic understanding of CSS
  • Ghost theme with customization options
  • Access to theme files or code injection

Step-by-Step Instructions

1

Access Ghost Admin Design Settings

Navigate to your Ghost admin panel and click on Settings in the left sidebar. Select Design from the settings menu to access theme customization options. Look for your active theme's customization panel.
Some themes have built-in customization options that appear directly in the Design section.
2

Use Built-in Theme Customization

If your theme supports it, look for Customize or Theme Options buttons in the Design section. Click on these to access color palettes, font selections, and layout options. Many modern Ghost themes include visual customization tools.
Popular themes like Casper, Source, and Dawn often include color and typography customization options.
3

Access Code Injection Settings

For custom CSS modifications, go to Settings > Code injection in your Ghost admin panel. This allows you to add custom CSS that overrides theme defaults. You'll see sections for Site Header and Site Footer.
Use the Site Header section for CSS modifications to ensure they load before the page content.
4

Add Custom CSS for Colors

In the Site Header code injection area, add <style> tags and include CSS rules for color changes. For example: :root { --color-primary: #ff6b35; --color-secondary: #2c3e50; } to modify CSS custom properties, or target specific elements like body { background-color: #ffffff; }.
Use browser developer tools to inspect elements and identify the correct CSS selectors to target.
5

Customize Typography with CSS

Add font customizations by including Google Fonts or custom font declarations. Use <link> tags to import fonts, then apply them with CSS like body { font-family: 'Inter', sans-serif; }. You can also modify font sizes, weights, and line heights for different elements.
Target specific elements like h1, h2, p, or .post-content for granular typography control.
6

Edit Theme Files Directly

For advanced customization, download your theme files and edit the CSS directly. Access Settings > Design and click Change theme, then Advanced > Upload theme after making modifications. Edit files like assets/css/screen.css or similar stylesheets.
Always backup your theme files before making direct modifications.
7

Preview and Test Changes

Use Ghost's preview functionality to test your customizations before publishing. Click Preview in the design settings or view your site in a private/incognito browser window. Test on different devices and screen sizes to ensure responsive design.
Check both light and dark mode appearances if your theme supports theme switching.
8

Save and Publish Customizations

Click Save in the code injection settings or design panel to apply your changes. For theme file modifications, upload the modified theme through the Design > Change theme > Upload theme option. Your changes will be live immediately.
Clear your browser cache and check your site to confirm all changes are displaying correctly.

Common Issues & Troubleshooting

Custom CSS not appearing on the site

Clear your browser cache and check if CSS is properly wrapped in <style></style> tags. Ensure CSS selectors are specific enough to override theme defaults by using !important or more specific selectors.

Fonts not loading or displaying incorrectly

Verify that Google Fonts or custom font URLs are correct and accessible. Check that font names in CSS match exactly with the imported font family names, including proper quotes around multi-word font names.

Changes only visible to admin users

Ensure you're testing in an incognito browser window or logged out state. Some caching plugins or CDN services may cache the old styles - try clearing site cache or waiting for cache expiration.

Theme customizations lost after theme updates

Use code injection instead of direct theme file editing to preserve customizations. If you must edit theme files, maintain a backup of your customized version and document all changes for easy reapplication after updates.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Ghost website before purchasing.
Visit Ghost View Ghost Pricing