Change Title Font

(Bruce Kieffer) #1

How do I change my site’s title font to one of the Google Font’s when my theme does not have the option to change the font? Most obviously it’s adding some CSS code, but what is the code, and where do I place the code?

(Robert Ziebol 🖖🏼) #2

Take a look at this FAQ on Joe’s Doc website

That should work.

(Bruce Kieffer) #3

Good info there. I have Stacks4Stacks FontStack. I think that may work since my needs are simple at this time. Can you help and the me what the Selector Names info is for the title text?

(Robert Ziebol 🖖🏼) #4

Would need to see your published site to find the selector names, as per that FAQ, you can inspect the title and it will tell you.

(Bruce Kieffer) #5

I think I found it. It most likely is H1. I still am testing a trial theme, so I don’t want to upload yet. I’ll come back to this question once I finalize my theme choice and publish my site. Thanks.

I looked further at the FAQ linked above. RW 6 does not have an “Inspect Element” contextual menu, so how would I get the code info?

(Andrew Tavernor) #6

@bruce If you look on the general tab of the RapidWeaver preferences you will see a checkbox for “Enable Developer Tools”. With this checked you can right click and inspect element just like in Safari.
You can of course always preview in an external browser as well and do the same (safari will similarly need developer tools enabled). Chrome will work out of the box.

Be careful though in just targeting the h1 element - make sure that there are no others on the page that you do not wish to apply the Google Font to.

(Bruce Kieffer) #7

Tav, learning that is helpful. Thanks. I bought the theme and published my site. I’m still trying to get the title fon’t o change. So far no luck. Please look at the code and suggest a fix. I want to use the Google font titled Handlee. Now that I can see the stylesheet, maybe I should try changing it in the CSS?

(Aaron Marquez) #8

@bruce in addition to @tav’s wonderful suggestion, I’d recommend checking out RapidWeaver.Pro

Jonathan from @nimblehost put together an excellent resource for customizing RapidWeaver websites with CSS.

(Robert Ziebol 🖖🏼) #9

@bruce the selector is siteTitle , add that to the Stacks4Stacks stack and it should work.

(Bruce Kieffer) #10

I can get the Handlee font to appear on everything except the title!

(Robert Ziebol 🖖🏼) #11

You need to have the Hash before the name, try #siteTitle. But this still does not work with FontStack by Stacks4Stacks. I do have it working with Joe’s Letterpress stack. You need to follow these two FAQs to get it working though.

  1. Using Custom Fonts
  2. Site Title

See it working here:

Not sure why Stacks4Stacks does not work, but if you do not want to do it the way I show you, I would contact Will over there, he is a great help, and I am sure he will figure out why it is not working for you.

Good luck!

EDIT - This bit of CSS also will work
#siteTitle {font-family: Handlee;}
Add this to the site wide code or to the page inspector CSS tab.

(Bruce Kieffer) #12

Got it working. I wrote to Will. He pointed out that the Selector Name had to be exactly this; #siteTitle, (comma needs to be at the end).

(Robert Ziebol 🖖🏼) #13

Glad you got it working.