WordPress Post Titles

[phillip.sims.jr]

This should be a simple question I think but is there a way to change the font of my post titles in wintersong pro. When I use my wordpress dashboard to create a post, it just lets me type in the name but doesn't give me any customization.

http://diathletes.com

[Victor Font]

Fonts are loaded in functions.php and style customizations are made by editing style.css.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[marybaum]

You can change anything and everything you want - as long as you're willing to learn how to use Cascading Style Sheets, or CSS. CSS is a coding language that lets you make one change, one time, to an element like entry titles, and have that change take hold on that element throughout your whole site.

There are ways to specify only some entry titles and not others, but that's beyond the scope of your question.

Just now I pulled up your site in Google Chrome and right-clicked on the post title. At the bottom of the popup menu is the choice Inspect Element.

That pulled up some extra panels, where I could see that the style information for your post types start at line 692 in your style.css file.

That section of the file reads like this now:

.entry-title {
	font-size: 36px;
	line-height: 1;
}

.entry-title a {
	border: none;
	color: #000;
 	font-weight: 400;
}

.entry-title a:hover {
	color: #dd3333;
}

At the moment, your entry titles don't specify a particular font, which means they're using the same one that was declared earlier in the code for a particular level (h2, if you know some HTML) of headline.

To use a different one, add your choice to the block that starts on Line 692.

When you're done, you should have a block that looks like this:

.entry-title {
       font-family: 'MyNewFont', serif;
	font-size: 36px;
	line-height: 1;
}

where MyNewFont is the new font you've chosen.

A couple of caveats:

If you're happy with the style of type - the actual typeface family - but just want to change the weight, instead of font-family, use font-weight. We declare weights in multiples of 100:
100 - thin or extrathin or some cute name for omg you can barely see it
200-thin or hairline or extralight (these are rare)
300-light (I almost always use this at BIG sizes for entry titles and usually at medium sizes for body text.)
400-regular
600-semibold or demi
700-bold
900-extrabold or black

Many type families will diverge from this to fit the weights they actually have, and italics are the same number as their straight partners. To use bold-italic, you'd write:

font-weight: 700;
font-style: italic;

If you want to change the size or the line height, you can make those changes in the existing values (36px and 1.0, respectively.) Line heights work best when you specify them as decimal multiples of one, with no units (0.1, 0.2 and so on).

If you come from a design background, you should be able to pick up CSS fairly fast and find it kinda fun. Three invaluable resources: CSS-Tricks, run by Chris Coyier, is in my toolbar for whenever I have a question about something. Chris and his friend Dave run a podcast called The ShopTalk Show, which is my car jam. And I've just started to play a bit on a site called CodePen.io , a project of Chris and two kids he went to high school with.

Yes, I'm a fan - I've learned a ton from him and his pals over the years. You will, too!

Mary Baum

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[phillip.sims.jr]

I will certainly check out those tutorials. I will also play around with the CSS as I am learning more and more everyday. Thank you for those explanations though too!

So, just to make sure I am understanding you correctly... If I change the font like you explained there then that will be the default font for each new post title or will I have to change it for each post title as I go?

Also, is serif the font type? Do I ever have to change that to something else? What is that there for?
.entry-title {
font-family: 'MyNewFont', serif;
font-size: 36px;
line-height: 1;
}

[Victor Font]

There are basically two types of fonts, serif and sans-serif. Sans is a French word that means without. Sans-serif means without a serif. A serif is a little foot at the bottom of some letters. You include the serif or sans-serif qualifier in the font-family declaration to provide a generic fall back for the browser in case the named font is not accessible.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[phillip.sims.jr]

Got it. Thank You!

[Author]

Posts