Change font size

Using Ghost
1

Hi, how can i change the font size one my articles?

More specifically I want different text to have different size font.

Thank you

2

If you are using a hosted Ghost blog, then you can inject custom CSS on your website to change the font size.

Go to Settings > Code Injection, and add the following code in the site header.

<style>
    body {
        font-size: 20px;
    }
</style>

If you want to increase the font size for a selected article, you can update it in the Post settings sidebar. After you open the sidebar, select Code injection, and add the above CSS in the site header section.

image
image613×970 42.9 KB

image
image759×551 12.8 KB

If you are hosting the Ghost blog yourself, then you should have access to the theme code, and you can edit the theme there.

1 Like
3

Nice tutorial!

One possible improvement @Joao_Ferreira might want to consider. The option above is going to change all the text, including navbar, headers, footers, etc. If you want to change just the body of the post, you probably want what’s in either .gh-content, so you’d want something more like:

<style>
    .gh-content {
        font-size: 20px;
    }
</style>

(Using the inspection tools in the browser is a great way to figure out what to target.)

Another option if you want to change just some of the text in the post would be to use a custom HTML card for that text.

2 Likes