How to change the default font and size of text in blog posts

jeannette@stampwithjega.com
(@jeannettestampwithjegacom)

9 years, 9 months ago

I have a few issues with Preference Lite. I have the free version. But would like to change to the paid version if I knew the advantages vs free version.
1. I really don’t like the default font and size. How can I change this for all my blog posts?

2. The size and font of blog date are wayyy tooo small. How can I change this size?

3. I downloaded the Preference child but don’t know how to use it. Is there a beginner tutorial somewhere (preferably video)

4. Something is wrong with my back up. I get a backup error every day.

As you can tell I am a novice. Very little html knowledge and no CSS knowledge. Please help me or guide me to some beginner tuts.

Thank you
http://www.stampwithjega.com
http://www.carterieplus.com

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter jeannette@stampwithjega.com
(@jeannettestampwithjegacom)

9 years, 9 months ago

Hmmm I was told that the support for Preference Lite was fonamilal. I haven’t received one answer to this post. Does that mean it is impossible to change my default font? I want all my posts to be verdana 12 pt black. Is that impossible?
Theme Author Styled Themes
(@gejay)

9 years, 9 months ago
Sorry about that.. I honestly did not see this posting 2 weeks ago and somehow missed.

Anyway, changing fonts and or font sizes to select parts of your posts and pages will require you to know some basics of CSS. Generally the best way is to use a font plugin to manage fonts. There are a few you can try such as WP Google Fonts.

However, doing it with your own CSS is the better way if you are using standard Windows and MAC fonts, such as Verdana. But as you mentioned you are a beginner, probably best to use a plugin then.

If you want everything in your site to be a bit bigger, you can apply a different font size to the <body> tag of your site. This theme has this in the stylesheet for the font and font size:
```
/* base styles */
html {
	font-size: 100%;
	font-family: "PT Sans", Arial, Helvetica, sans-serif;
	color:#747474;
}
body {
	font-size:13px;
		font-size: 0.813rem;
	line-height:21px;
		line-height:1.313rem;
}
```
You see two font sizes, one in px and one in rem. For old browsers, it uses the px value, but with today’s browsers, it will recognize the rem (and em values) which is a relative size. You can of course do your own custom size as px if you wish. The font family used is “PT Sans”, and if that isn’t seen by your browser, then it uses Arial, then Helvetica, etc. These are global font settings meaning everything in your site.

Your blog date etc…are done from here:
```
.gj-article-details {
	margin:12px 0 18px;
	font:normal 11px verdana, helvetica, sans-serif;
		font-size:0.688rem;
}
```
The blog date meta info is using 11px (0.688 rem) verdana for the font size and family.

For child themes: http://codex.wordpress.org/Child_Themes
Preference setup tutorials: http://www.styledthemes.com/preference-lite-setup **there is a tutorial there for the child theme.

For your backups…not sure how you do backups but you will want to refer to the plugin developer’s support (if using a plugin) or backup service.

As a side note…it’s really a good idea to explore the basics of HTML and CSS when running your own site because at some point, you will need to use these, whether editing something or creating something. It’s an invaluable resource to have. It’s not always easy, but once you get familiar with it, things get a lot easier over time.

I will say one thing though…the fact you mentioned you do backups is a good start because many do not keep backups.
Thread Starter jeannette@stampwithjega.com
(@jeannettestampwithjegacom)

9 years, 9 months ago

Thank you for your answer. I have a little knowledge of HTML and no knowledge of CSS.

My question now is where will I find the “body” tag for my site?

Where do I put the codes so that everytime I do a blog post the font and size are Verdana 12 pt.
As it is now, I have to change it everytime I start a new paragraph which is very inconvenient.

Is there a tutorial somewhere (preferably video) where I can learn how and where to change my fonts for Date, and body?

Thanks
Theme Author Styled Themes
(@gejay)

9 years, 9 months ago
The body tag is part of the theme’s header.php and footer.php file, but you won’t have to touch these files. You would just create a new CSS like my code further above that shows this:
```
body {
font-size:13px;
font-size: 0.813rem;
line-height:21px;
line-height:1.313rem;
}
```
So for you, you would recreate that with your own font size like this:
```
body {
font-size: 14px;
}
```
I’m going to assume you just need to change CSS code for any modifications you want to do, so a child theme isn’t required for this unless you plan to physically change a file. Download and install a plugin called Simple Custom CSS. This lets you create or modify CSS code like I just did for you with the body. Refer to their documentation on how to use it, but this method makes it easy for anyone who is new to CSS.

For your blog post text font size, you would create custom CSS for the container the blog text content goes in. Although I have not tested this, your code for this would be like this:
```
.type-post .entry-content {
font: normal 12pt verdana;
}
```
That means, the font style will only be applied to the blog post content only.

For the date info and author, etc., on posts, you would do something like this:
```
.article-info {
 font-size: 13px;
}
```
All the code I did above here would be copied and pasted into your custom CSS which that plugin would create for you (a blank stylesheet).

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to change the default font and size of text in blog posts’ is closed to new replies.

Tags