Product Dev Back to Ghost

Basic Casper Theme Customizations

For those who are using Casper and not sure where to start when it comes to personalizing your blog - have no fear! We've provided some basic tweaks that you can make to your blog without having to get your hands too dirty.

How to change the font

The following page elements are currently styled to use "Open Sans" as the default font. To replace "Open Sans" with a different font, you will need to copy and paste the snippet below into the Blog Header section of the code injection screen on your blog, replacing the font-family declaration with the font family you'd like Casper to use.

h1, h2, h3, h4, h5, h6,  
.main-nav a,
.read-next-story .post:before,
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family:"Georgia", sans-serif; /* Replace with your own font */
NOTE:You MUST include an opening and closing "style" tag at the beginning and end of any CSS you add to the Blog Header.

If you're not sure where to find additional fonts, GoogleFonts has a large collection that can be easily integrated into your Ghost blog via code injection as well. To add the new font, copy and paste the standard font embed code from GoogleFonts into the Blog Header section of your code injection screen, along with the style.

Change Casper Font

How to change text color of the page title and description

To change the text color of the page title and page description, add the selectors for each element to the Blog Header section of your code injection screen, and declare a color to be used.

.page-description {
   color:#000000!important; /*Replace with your own 6-digit hex color */
NOTE:You must include !important; after your hex number, or your color change will not display on your blog.

What's Next?

If you're feeling a bit adventurous, you can download a free HTML editor, such as Brackets, or use your own HTML editor and give one of the guides listed below a try! If you get stuck or need a hand be sure to checkout the #themes channel over on Slack.