Pique Theme: Change font in footer widgets, footer menu, and footer credit

  • Unknown's avatar
    whitfrancene · Member ·

    I am using the Pique theme and I don’t like the font it defaults to for the footer widgets, footer menu and footer credit. How do I change the font for these three parts without changing the font anywhere else on the whole website?

    I would like to replace with Gotham font. If not possible, I would like whatever sans-serif font is used throughout the blog. Could you please assist?

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

  • Unknown's avatar
    timethief · Member ·

    This is the Support Forum not the CSS Forum.

    See here for details on purchasing an annually renewable upgrade https://wordpress.com/pricing/ that contains a custom design upgrade required for CSS editing.

    Custom design – Frequently Asked Questions such as: I’m not sure if Customize is right for me. Can I try before I buy?
    http://en.support.wordpress.com/custom-design/#frequently-asked-questions
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/editing-css/
    http://en.support.wordpress.com/custom-design/custom-fonts/

    Note 1: Once you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.

    Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing.

  • Unknown's avatar
    whitfrancene · Member ·

    I already have all of the above.

  • Unknown's avatar
    timethief · Member ·

    Note 1: Once you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.

  • Unknown's avatar
    timethief · Member ·

    Oops! I said Support Forum above but meant to type Themes Forum. You need to create your custom design threads into the CSS Forum.

  • kathrynwp · Staff ·

    No need to submit a duplicate thread, we can answer this one here. (Timethief, Theme-team staff makes sure all Themes forum questions are answered, so there’s no need to ask folks to repost – thanks!)

    Gotham is not available (you can see which fonts are an option in the Fonts panel in the Customizer) but you can change the footer font if you like.

    The sans-serif font used throughout Pique is Karla.

    The footer text already is using Karla, so I’m not quite sure what you’re seeing.

    Could you point me to some specific text that’s using the font you’re looking for? Thanks!

  • Unknown's avatar
    whitfrancene · Member ·

    I would like the font for the About Us widget text, footer menu, and footer credit to be the same as font on the Contact panel. If it could even be thinner that would be amazing.

  • Unknown's avatar
    whitfrancene · Member ·

    Also, to make the fonts for individual blog post titles the same as the font on the home page panel titles (ABOUT, CREATIVE COLLABORATION, MEET, FROM THE BLOG, CONTACT) without the box around it of course.

  • kathrynwp · Staff ·

    Thanks for the clarifications, that’s helpful.

    To change the font on text widgets, the footer menu, and credit, and remove the italics, you’d add this:

    .textwidget, .secondary-links a, .site-info {
     font-family: Karla,sans-serif;
     font-style: normal;
}
If you want to keep the italics, remove the <strong>font-style: normal;</strong> line. 

To make the font a bit thinner throughout the footer, try:

    .site-footer {
    font-weight: 200;
    } 

    To remove the italics in your footer credit, add <strong>font-style: normal;</strong> to your existing custom CSS here:

    .site-info::before {
    content: “The Crane Collective | Copyright 2017 All Rights Reserved.”;
    display: block;
    visibility: visible;
    font-style: normal;
    }`

    Note that you don’t need to hide the footer credit with custom CSS — and then make your custom credit visible again later. Since you have the Business plan, you can hide the footer credit by opening the Customizer‘s Site Identity panel and choosing “Hide” from the Footer Credit menu.

    I’ll answer your other question separately.

  • Unknown's avatar
    whitfrancene · Member ·

    Thank you! The first code for changing the font and removing italics worked. I didn’t see a difference with the second code on making the text thinner though… I would like it to be as thin as the font that the address is in.
    Also, where exactly do I add the code to remove italics in footer credit? I think I’m adding it in the wrong spot so it’s not working.

  • kathrynwp · Staff ·

    Also, to make the fonts for individual blog post titles the same as the font on the home page panel titles (ABOUT, CREATIVE COLLABORATION, MEET, FROM THE BLOG, CONTACT) without the box around it of course.

    Give this a try:

    .single .entry-title {
  font-family: Karla, sans-serif;
  font-style: normal; /* makes post titles not italicized */
  text-transform: uppercase; /* makes post titles uppercase */
}

    Let me if that’s what you’re after on the individual blog posts.

  • Unknown's avatar
    whitfrancene · Member ·

    That’s exactly what I’m after for my blog post titles! Thank you!

    Still confused on a couple footer issues though.

  • kathrynwp · Staff ·

    I didn’t see a difference with the second code on making the text thinner though… I would like it to be as thin as the font that the address is in.

    You can’t use the number 50 as you have, only 100 through 900 are valid numerical values for this property. I’d suggest you give 200 a try. More info.

    Also, where exactly do I add the code to remove italics in footer credit? I think I’m adding it in the wrong spot so it’s not working.

    You need to add one more line to this part of your existing CSS:

    .site-info:before {
  visibility: visible;
  display: block;
  content: "The Crane Collective |  Copyright 2017 All Rights Reserved.";
}

    So it becomes:

    .site-info::before {
  content: "The Crane Collective | Copyright 2017 All Rights Reserved.";
  display: block;
  visibility: visible;
  font-style: normal;
}

    See the last part: font-style: normal; – that’s what removes the italics.

    Let me know how it goes!

  • Unknown's avatar
    whitfrancene · Member ·

    Okay, this works for removing italics on footer credit!

    As for making font thinner, I changed to 200 like you recommended and I still don’t see a difference. I’d like the About Us and From The Blog font to look like the Address font.

  • kathrynwp · Staff ·

    Hmm – could you upload a screenshot so I can understand better what you’re seeing? The font looks thinner to me.

    Here’s a guide on how to make a screenshot:
    http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.

    This is what I’m seeing: https://cloudup.com/crLbu0TCQxg

    Thanks!

  • Unknown's avatar
    whitfrancene · Member ·

    Never mind, I just decided to omit the about us section and replaced it with an Instagram feed. I think the From The Blog section looks fine.

    I made a new ticket regarding the grid page template that you helped me out with a few days ago as it’s not translating correctly on mobile view. Should I copy and paste my question here? Or should I wait for you or someone else to respond to my separate topic?

    Thanks for your help!

  • kathrynwp · Staff ·

    Should I copy and paste my question here? Or should I wait for you or someone else to respond to my separate topic?

    Nope – someone will get to your other thread.

    Thanks for your help!

    You’re very welcome!

  • The topic ‘Pique Theme: Change font in footer widgets, footer menu, and footer credit’ is closed to new replies.