Changing font family on casper theme

Developer help
1

I want to change the font-family of the default casper theme. I’ve injected code like so in the header but it doesn’t seem to work. When I do inspect element I’m getting this which overrides the code injected above. How can I fix this?
image

<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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet"> 

<style>
    html, body {
     	font-family: 'Open Sans', sans-serif;
    }
    title {
        font-family: 'Oxygen', sans-serif;
    }

And

  • How was Ghost installed and configured? docker + mariadb
  • What Node version, database, OS & browser are you using? v12.22.9
  • What errors or information do you see in the console? nil
  • What steps could someone else take to reproduce the issue you’re having? default casper theme

Appreciate any help!

2

@yuknet you can try using CSS !important …

3

The trouble here is that the Ghost class (.gh-content > p) has more specificity than your CSS, so it overrides it. Also, title won’t work to target your headings (you need to list them explicitly like h1, h2…).

Try this:

<style>
html {
  font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oxygen", sans-serif;
}

.gh-content > p {
  font-family: "Open Sans", sans-serif;
}
</style>

Finally, you should add this snippet to your site’s Code Injection → Site Header. That way, it’ll come after the default styles and override them.

2 Likes
4

It worked! Thank you so much!

2 Likes