As a newbie, I’m struggling with these two things that are making me question if my skill level is strong enough to continue using ghost.
-
When I download Themes (right now I’m using Solo), the header fonts are always very small and I’ve searched all kinds of ways on how to change this. I don’t know how to a. change the size or b. use a different font or even a brand icon. I’ve read through other posts in this forum, but I’m not even sure WHERE to navigate to start messing with the code.
-
I want to use convertkit for a newsletter and tie it to my blog. I figured out how to add a convertkit pop-up in each blog post. No idea how to put a fixed subscription box on the site’s main page tho.
These are the only two pain points frustrating me to the point where I’m thinking to just do a newsletter on convertkit and skip the hassle of having a blog. Your help is appreciated.
Hey Lucca!
Welcome to Ghost. Those are pretty small problems (although I hear you that you’re frustrated by them!), so let’s see what I can do to help with this:
1a) You can change the font size super easily, just using code injection. No need to edit the theme. Here’s a little tutorial I wrote that talks through how to figure out what to change and change it. (If you’re stumped, please post again.) You can also load a different font - here’s a walkthrough: How to Change a Ghost Theme Font Using Google Fonts | Aspire Themes
1b) Most themes will display a logo (brand icon?) if you upload one. Under Settings (the gear on the dashboard - lower left corner), click Design, then open the dropdowns on the left and you’ll find lots of customization options. (Exactly what depends on the theme.)
- The site’s main page is going to be served by index.hbs, or home.hbs if your theme has one. Many themes use partials, which will look like {{> partialname}} and cause Ghost to pull in code from partials/partialhname.hbs.
Hope that helps! Post again if you get stuck?
2 Likes
In your explanation, you say, “Embed the font code from Google.”
When I go to Google fonts, I see plenty of fonts. I can download them. I can test them. But where do I get a “font code”?
Go to fonts.google.com. Search for and click the font you want. Then find the specific style(s) you want and click the +
Once you have the font(s) you want, click the top right icon:
And then you should see the embed code you need:
I half-figured it out. The Header now has a great-looking font.
But the text of everything, including blog posts, changed to this font also!
Me = lost.
laughs Well, that won’t quite work, will it?
Can you link your site?
I suspect that what you will want to do is apply the font just to the header, but those directions had you applying it to the body. If you have something like this:
html, body {
font-family: var(--font-family-sans);
}
Change it to
.gh-head {
font-family: var(--font-family-sans)!important;
}
I’m guessing since I don’t have your site open in front of me. For more a better hint, share a link. :)
1 Like
Hi, thank you. I still can’t quite get it to work, and I’m not sure how to learn it.
My site is https://zen-is-a-shoe.ghost.io
This is what my code looks like right now
Did you define --font-family-sans somewhere?
Dear, I’m not sure what I did. I’m copying things out of Google fonts and pasting them. And do you have any recommendations where I can learn these things?
Sorry - forgot which tutorial you were working off of.
So you need that link line that includes your font, then you need:
<style>
.gh-head {
font-family: Roboto, sans-serif!important;
}
</style>
(Note that Roboto is there because that’s what I see in your image. If that’s not the font you’re trying to load, you’ll need to update it.)
Style corrected - should have a ‘.’ before gh-head.
I think this will work for now. Thank you.
I don’t like being stuck like this. Any advice on a place I can learn these things?
I looked at your Ghost themes, and they’re super nice. I’d like to get my know-how up to par before I begin considering custom themes like yours.
Again, thanks for helping me along.
Hey Lucca, glad to hear that’s working.
I don’t personally have any Ghost themes. (It’s a goal for the summer, but I keep getting distracted by paying work customizing other people’s themes!) But yeah, there are a lot of nice ones in the Ghost marketplace!
Changing website styling generally requires some CSS. There are lots of good free tutorials out there if you want to dig in. Or if you just want to focus on blogging, not doing web design, lots of folks on the forum are happy to help craft a little bit of code injection when needed. (You’ll make it easier for us to help if you link your site and are specific about what you need changed.) You can also check out the Ghost Experts directory, if you decide you want paid help.
Happy Ghosting!
