Change Font in Slider Only?

• 

  holycowranches · Member · Jan 28, 2017 at 4:45 pm

  • Copy link
  • Add topic to favorites

  Hello, Can I change the font for the slider only? Without affecting the rest of my pages as well?

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

• 

  kathrynwp · Staff · Jan 30, 2017 at 4:51 pm

  • Copy link

  Yes, but it depends what font you’d like to change it to.

  You can use these fonts with custom CSS to target just the slider

  – Font in the Customizer you’ve selected for Headings
  – Font in the Customizer you’ve selected for Body
  – Any of the theme’s default fonts
  – Any standard system fonts (like Verdana, Arial, Georgia, etc.)

  Here’s an example using the system font Georgia, with Times as a fallback font:

  /* Change slider post title */
  #featured-content .entry-title a { 
       font-family: Georgia, Times, serif;
  }
  
  /* Change slider post excerpt */
  #featured-content .entry-summary {
       font-family: Georgia, Times, serif;
  }

  If you need further help, please let me know which font you’d like to use — keeping in mind that it must be part of the list above — and whether you want to change the slider Heading (i.e. Fighting Hunger Through Ranching) or Excerpt (i.e. Over 50 million Americans are hungry) or both. The fight against hunger is not something we take lightly, and the need for intervention is greater than you may know.) font.

• 

  holycowranches · Member · Feb 1, 2017 at 5:09 pm

  • Copy link

  Thank you Kathyrn, this helped, but I would like to see the “default” font (which I’m not given it’s name) on the excerpt in a larger size, but it is not giving different sizes as an option.

  Also when I used your CSS for the slider post title, it did not change the rest of the text on other pages back to the default font.

• 

  kathrynwp · Staff · Feb 1, 2017 at 6:11 pm

  • Copy link

  If you only want to change the size of the slider text and not the font itself, you don’t need to specify which font, use font-size instead:

  /* Change slider post title size */
  #featured-content .entry-title a { 
       font-size: 50px;
  }
  
  /* Change slider post excerpt size */
  #featured-content .entry-summary {
       font-family: 24px;
  }

  Modify the values as you like.

  Also when I used your CSS for the slider post title, it did not change the rest of the text on other pages back to the default font.

  The code I gave you is only for the slider.

  If you want to return the body and/or heading font everywhere back to the theme’s defaults, go into your Customizer’s Fonts panel and click the X next to the appropriate menu:

  

  If I’ve not understood what you’re trying to do, could you please explain your goal in more detail?

• 

  holycowranches · Member · Feb 1, 2017 at 7:49 pm

  • Copy link

  You understood what I am trying to do :-) Thank you!

  However, I pasted the CSS you gave me to change the excerpt text size, but it is not changing. I have it on 60px now and it looks the same.

• 

  kathrynwp · Staff · Feb 1, 2017 at 8:50 pm

  • Copy link

  Oops! There was a typo in my code, the piece for the excerpt should be:

  /* Change slider post excerpt size */
  #featured-content .entry-summary {
       font-size: 24px;
  }

  Sorry about that!

• 

  holycowranches · Member · Feb 1, 2017 at 9:12 pm

  • Copy link

  Perfect! That worked!!! Thank you so much!

• 

  kathrynwp · Staff · Feb 1, 2017 at 9:22 pm

  • Copy link

  Great, glad that did the trick!