Change font in text widget title, add link

You can use a Google Fonts plugin to add a new font to your theme.

You can then target the front-page widget titles with this CSS in your child theme’s stylesheet:

.front-widget-area .widget-title {
  font-family: xxxxx;
}

Follow the Google Fonts instructions on how to call the font in via CSS.

I’d also like to make the titles linked to specific pages.

There isn’t an easy way to do that, since the text widgets core WordPress functionality and the titles aren’t linked. You could add a title within the text widget instead, perhaps using an h2 tag.

You could leave the widget title blank, and style the h2 tag as you like in your child theme, for example:

.front-widget-area h2 {
  font-family: xxxxx;
  font-size: 30px;
}

Let us know how it goes.

Thank you for your response. I have the Use Any Font plugin and have installed the font I’m using, which has worked in other places on the site. I added this code to my Edit CSS file and Stylesheet, but still no change.

The second part of the question isn’t as important as the first part, I really would like my font on the widget titles to match the site.

There are a couple of problems. If you look at your child theme’s stylesheet here:

https://woodplankcreative.com/wp-content/themes/sela-child/style.css

1. The code has been added between the comment tags at the top. It needs to be below the comment tags to have any effect, so below this line:

-------------------------------------------------------------- */

2. The code itself is not correctly formed. You have:

.front-widget-area .widget-title {
  klinik-slab: #656565;
}

This line is not valid CSS: klinik-slab: #656565;

Give this a try instead:

.front-widget-area .widget-title {
  font-family: klinic-slab, Oswald, serif;
  color: #656565;
}

Screenshot: https://cloudup.com/cJy2lGQ0-kP

Worked like a charm, thank you!

Excellent! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

I want to change the font face of the text in the widget footer. How do I do that? My site is still not available for public viewing though. Any suggestions?

@ishilta The basic CSS to change the footer widget font would be:

.footer-widget-area, .footer-widget-area h3 {
  font-family: Georgia, Times, serif;
}

If you prefer a fancy font, you can also install a Google Fonts plugin, as I mentioned above, and then reference that font in your CSS, as specified by Google.

If you still need help, please start a new thread and let me know where you’re getting stuck.

https://www.ads-software.com/support/theme/sela#new-topic-0