Archives

A New Look For My Blog

I finally figured out how to fine-tune some of the settings on the blog. The default WordPress template used what I thought was too small a font size. Unfortunately, since I’ve grown older, my eyes aren’t what they used to be, and so I’ve found myself straining sometimes to see what I’ve written. I wanted to make the font larger, but I didn’t know quite how to do it.

I also wanted to change the font style. I’ve always preferred serif over sans-serif fonts, and I wanted to incorporate them as well.

After poking around on the web for most of the morning, I’ve found the solution. And, since I’m such a nice girl, I’m going to share the solution with all of you.

The Problem

The problem with using a special font in a blog or on a web page is that in order for you to see the same font that I’m using, you have to have the same font on your computer. That’s because the HTML that does the magic behind the scenes specifies both the font family and the font size to use. And if your computer doesn’t have that font installed, it will choose whatever you do have that’s close to what I specified.

In the old days of the Internet—say, the early 1990s—the only way to be sure that you saw exactly what I wanted you to see (as far as fonts are concerned) was for me to make my entire site a series of .PDF documents. This is a cumbersome system at best, would require you to download and install a .PDF reader (if you didn’t already have one), and would probably result in you saying, “Screw this!” and heading somewhere else.

So what is the solution? How can I be certain that the font you’re reading on the page is the one I wanted you to see?

Enter Google Fonts

Google fonts is a series of web-based fonts that are available for anyone to use for free. By using these fonts, I have assured myself that where I am using Gentium Book Basic 12 point font, you are seeing Gentium Book Basic 12 point font.

Without going into a lot of technical detail (which you can find here, if you’re interested—or if you’d like to use Google Fonts on your blog or web site), what I’ve done is told your browser not just the font to use but where to go to find it.

In plain English, you are now viewing my blog in the font that I wanted you to view it in, without having to actually have that font installed on your computer.

Other Font Magic

I’ve also specified a different font face and size for the various heading styles on the page. And if I wanted to, I could even change the color or the type. The possibilities are endless. The one thing I was careful to do is this: since I have about 20 different fonts in my Google Fonts collection, I only told the page to load those fonts that I’m actually using. To have it load all 20 would result in the pages taking my longer to load, and that can turn a lot of people off. I know it does me!

The Secret?

If you would like to use Google Fonts, you’ll need to know some basic HTML. But don’t panic! Google shows you exactly how to do it. All  you need to do is edit their example to reflect the specific fonts you wish to use, and edit the CSS behind your blog template.

Here’s how I did mine (using a WordPress-style template):


<link href=’http://fonts.googleapis.com/css?family=Lobster|Gentium+Book+Basic:400,400italic’ rel=’stylesheet’ type=’text/css’>
<style>
body {
font-family: ‘Gentium Book Basic’, serif;
font-size: 12pt;
}
h1 {
font-family: ‘Lobster’, cursive;
font-size: 36pt;
}

h2 {
font-family: ‘Lobster’, cursive;
font-size: 24pt;
}
h3 {
font-family: ‘Lobster’, cursive;
font-size: 18pt;
}
</style>


The beauty of style sheets is that I only need to do this one time for the entire site, as opposed to once for every blog entry. Another plus is that later on, if I decide to change the appearance again, I just have to modify the style sheet and the entire site will reflect the changes.

So what else can you do with style sheets? If I wanted to, I could change every single element of this blog, from the colors to a background image to the width of the reading area. You name it, a style sheet can change it.

And that, in a nut shell, is the magic behind the new look.

Catch you later!

A Perfect Web Site

This evening’s post was going to be about good web page design, and everything I’ve learned about creating web pages since I first started back in 2004. But then I discovered a web page that shows me someone’s beaten me to the punch. I don’t agree with everything he or she says, but it makes a lot of sense.

A word of warning: if you don’t like bad language, don’t go there. In the meantime, I’m going to have a cup of coffee and think about what I’m going to write (and post) tomorrow.

If you’re still interested, go check out A Motherfucking Website.

Not Safe For Work

(That should be obvious from the name of the link!)