Changing font color and text on each page title

• 

  jewithcheryl · Member · Mar 16, 2017 at 4:38 pm

  • Copy link
  • Add topic to favorites

  I’d like to know how to change the font and the color on the title of each page. For example, I have a featured image in shades of orange. I want to then use a similar shade of orange for the word Recipes where the text of the page is. Plus I want to change the font.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 17, 2017 at 8:22 am

  • Copy link

  Hi there, to change the font color of the titles on a page-by-page basis, you can use the unique page id CSS class from the opening body html tag on the subject page. As an example, for your Featured Product page, this would be the CSS to change the color to an orange from the image.

  .page-id-140 .entry-title {
  	color: #F7842A;
  }

  On the font family, you can set two fonts at Customize > Fonts, one for Headings and one for the Base Font. We cannot add additional fonts from outside of our system. You can set a font that would be present on all computer systems, but the selection is quite limited. This website has a listing of the common fonts installed on Windows and Mac. They are arranged in “font stacks” so that there are a few different fonts specified just in case someone did not have the first font, it would load the second, and if not the second, then the third. You would add a font family declaration to the above code like this to change the featured product title to Impact, Impact, Charcoal, sans-serif like this. I also included a font-style set to italic.

  .page-id-140 .entry-title {
  	color: #F7842A;
  	font-family: Impact, Impact, Charcoal, sans-serif;
  	font-style: italic;
  }