How to customize fonts on individual pages

Hi there, I’d like to have the flexibility of changing fonts (typeface, weight, and color) on individual pages. How can I do that? From the typography customizer it seems that it only allows for universal changes.

Thanks

Hello There,

Thanks for writing in! Yes you are correct. The Typography settings in the theme options/ customizer will be applied globally. If you are using Cornerstone, you can override the font settings by inserting inline css for the specific element on the page. To have specific settings for each individual page, you will have to make use of custom css. If you are using Cornerstone in creating the page, you can insert the custom css in Cornerstone’s custom css section. And if you want to target specific page or post and would like to use custom css, you can use the body class of the page/post and add the custom css in your child theme’s style.css. At this moment, we could not give you code because we do not have any idea of which page/post and what elements on the page/post you want to change the font family. If you would mind provide more details about your page and fonts and we would be happy to assist you in anyway we can.

Thank you for your understanding.

Thanks, @RueNel. I am playing with the theme right now to learn how to use it. I’m in now way a professional web designer but have used WordPress for a couple years now so I understand the basics. Coding isn’t something I’m very familiar with though. I tried to add some custom CSS but it didn’t work so I KNOW I’m doing something wrong.

To start, I would like to change the font attributes on this page: http://tammym111.com/test-home The site is password protected for now so you will need to enter the PW, which I included as a secure note.

I’d like to change the “custom headline” font to Helvetica Neue Bold, the “text type” text to Raleway, and the “text” element to Raleway-Thin. I’m going to play around with the background image so I’d also like to play around with the text colour. On the right side of the page I played with the headings to see if any of them were affected by the changes I made in the typography section of the customizer but it doesn’t appear to have. I have the headings set to Helvetica Neue (system) and the body set to Raleway (google).

Any help you can provide would be appreciated. Thank you.

Hello There,

Thank you for the very detailed information. To start with your modifications having to have a custom font on a specific page, please edit the page in Cornerstone. Now assuming that you have loaded Helvetica Neue and Raleway on the page, you can insert an inline css in the custom headline or text element. Please check out my screenshot: http://prntscr.com/ftepc6
http://prntscr.com/fteq55

You may insert in the inline css font-family: "Helvetica Neue Bold"; or font-family: 'Raleway', sans-serif;

Hope this helps.

Yes, thank you, it does help, but…how do you load a font onto an individual page?

  • Tammy

Hi There,

Please follow this post on how you can load a Google Font.

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.