Casper: Apply Google Font only to specific element with Code Injection

Themes
1

Sorry for two posts today. Promise I will not clog up the forum any more than this for a while.

Anyway, I used Code Injection and successfully switched the font on my title/description header to Barrio. Barrio looks good here, but it gets old fast when used on other areas, like post titles and menus. So I’m wondering, is there any way to exclude these other areas and only have the title/description lines of text affected?

Here’s my code injection

< 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=Barrio&display=swap” rel=“stylesheet”>

< style>

body {
font-family: ‘Barrio’, sans-serif;
}

< /style >

Thanks!

2

You’d want to target something other than the body element. If you’re on Chrome, you can right click the title and choose inspect to see what it’s called. Or link your page and I can tell you. :)

3

Hi, thanks for the info.
My site is still an early work in progress, but it is:
https://theo-logicaldebris.ghost.io/ghost/#/site

BTW, do you know if there’s any way to make the cover image display on other pages via code injection?

4

Remove the existing style tag content and change to:

.site-header-content.left-aligned .site-header-inner {
    align-items: flex-start;
    font-family: 'Barrio';
}
</style>

You probably could change the other pages to display the cover image, but it’d be a good sized chunk of javascript. If you can load a custom theme, making that change in the .hbs files would be preferable.

1 Like
5

That did the trick! Thanks so much!