Changing the Font Style in your blog stylesheet.css
Posted by: dragonblogger // Category: Internet, blogging
|
|
So I finally found time today to tweak my font style on my blog to try and make it more readable, first I edited my stylesheet.css with Theme Editor in Word Press, then I found the section related to my posts which looked like this:
/* Post – Entry */
#content .post .post-entry {
font: normal 12px/18px “Century Gothic”, Verdana;
color: #ffffff;
width: 522px;
margin: 0 9px 0 8px;
padding: 0 20px;
background: #434343 url(“images/post_entry.gif”) repeat-x;
float: left;
}
#content .post .post-entry a {
color: #ffffff;
text-decoration: underline;
}
#content .post .post-entry a:hover {
text-decoration: underline;
}
#content .post .post-entry .more-link {
font: bold 12px/20px “Century Gothic”, Verdana;
color: #ffffff;
float: right;
}
At first I just tweaked the font size from 12/18 to 14/20 and this helped a little, but I don’t like the Century Gothic font or the Verdana fonts, they are too “thin” for a white font on a grey background. Â So I switched them out to Arial and voila, now that same section looks like this:
/* Post – Entry */
#content .post .post-entry {
font: normal 14px/20px “Arial”, Arial;
color: #ffffff;
width: 522px;
margin: 0 9px 0 8px;
padding: 0 20px;
background: #434343 url(“images/post_entry.gif”) repeat-x;
float: left;
}
#content .post .post-entry a {
color: #ffffff;
text-decoration: underline;
}
#content .post .post-entry a:hover {
text-decoration: underline;
}
#content .post .post-entry .more-link {
font: bold 14px/20px “Arial”, Arial;
color: #ffffff;
float: right;
}
So what do you all think of the new font type and size, are my posts easier on the eyes now? Â I want to hear from my fellow bloggers and readers.
-Dragon Blogger
Related posts:
- Adding Previous or Next Post Links to your Wordpress Blog By adding a simple statement into your single.php you can...
- Wordpress Plugin – Custom Post Background I decided to test a new Wordpress plug-in called “Custom...
- Modify Your Wordpress Theme to Align Images Simple lines of css code inserted into your Wordpress stylesheet...
- Manually Add the TweetMeme Submit Button to Wordpress This code lets you manually place the TweetMeme submit button...
- Finding And Removing Dead Links For Your Blog I was using Google Web Master tools and noticed the...
Related posts brought to you by Yet Another Related Posts Plugin.
Tags: arial, blog font, blog font change, blog help, blog tips, blog tools, blog tricks, blogger, blogging, changing font in blog, changing font in themes, changing stylesheet.css, font changes, font help, font wordpress, fonts in stylesheet, stylesheet.css, verdana, wordpress changes, wordpress stylesheet, wordpress themes
November 24th, 2009 at 7:57 am
Looks nice and clean, Justin (I don’t remember thinking it didn’t, before, but I’m guessing it defaulted to Verdana, and I don’t have anything against that).
You know, we could all use a few more “practical css tips” in our lives, I think. For instance, do you have any special mnemonic to help me remember which SIDE goes in which order in the following statement: margin: 0 9px 0 8px; ? Seriously, I’m tired of figuring it out by trial-and-error or dragging out Danny Goodman’s DHTML bible every @#$%! time…
It’s like trying to spell broccoli. Should be easy, but it’s easier (some days) to spell floccinaucinihilipilification. Why IS that?
Holly Jahangiri´s last blog ..Monday News & Views
[Reply]
November 24th, 2009 at 9:25 am
Thank you for posting this, Justin! You’re going to help a great many people. I don’t know html so I use these online tutorials all the time.
Heather Kephart´s last blog ..Neurotic Confessional
[Reply]
November 24th, 2009 at 9:41 am
Anytime, glad to help others as I learn how to tweak and manipulate my own blog php code.
[Reply]