How To Get A Pretty Font In Blog

Beginner's Guide to Fonts for Your Blog: How to Use Cool Fonts on Your Blog or Website. From http://www.DesignYourOwnBlog.com.

How to Use Cool Fonts on Your Blog or Website

Adding new fonts to your blog or website is really easy! In this third and final part of the Beginner's Guide to Fonts for Your Blog, we'll talk about how to import some favorite fonts to your blog or site by either linking to or uploading them. Hopefully by now you've determined what type of fonts to use on your site and picked some favorite combinations.

But before we get started, make sure you've read Part One: How to Choose Font Combinations for Your Blog or Website, and Part Two: Where to Find Free Web Fonts. Ok, let's do this!

I highly recommend trying out Google Fonts first because it's the quickest and easiest way to add a new font to your site. Then we'll talk about using Webfont Kit, but that's a tad bit more complicated.

How to use Google Fonts

There are two easy ways to add a Google font reference to your blog: add a line of code to your style sheet or add one to the <head> of your webpages. This line of code is basically a link or reference to the font that's hosted out on the web or on your own server.

After you've located a font that you like, click on the Quick Use icon to the right

Google Fonts Quick Use Icon

Step 1: Select the styles you want.
Step 2: Use the default checks for the character sets.
Step 3: Select the font reference code. Choose either the Standard or @import tabs:
- Standard code is pasted anywhere in the <head> section of your website
- @import code is pasted at the very top of your style sheet (CSS) – hint: this is the easiest way!
- Javascript code would only be used if you had a good reason to use it
You most likely have easy access to your style sheet so, since adding the @import code is the easiest way, I'll just show you how to do that. At the very top of your style sheet, paste the @import code you copied from Google Fonts. For example to add the font Open Sans:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

The numbers 300,400,600,700 mean that you are planning to use different weights of this particular font: thin, normal, semi-bold and bold.

If you are using a self-hosted version of WordPress, it's even easier than this! A new Free Google Webfonts plugin is available and allows you to choose any Google Web Font right from your dashboard!

So adding Google Fonts is easy right?? Well there's one more step below. But first what about Webfont Kit?

How to use Webfont Kit

Browse fonts from the homepage at FontSquirrel.com or narrow your search by selecting a category at the left
When you find a font you want, click on it
Click on Webfont Kit in the purple bar near the top
Leave the default as your subset
Choose your font formats (I suggest checking them all for maximum browser and device compatibility)
Click the Download button and save the file somewhere on your computer
Read the instructions in the zip file to add the fonts to your website and add a reference to your style sheet

How to Use the Font in Your Webpages

Ok now that we've added our reference link(s), we want to be able to incorporate the font somewhere in our site. Let's say we want to use this font, Open Sans, in our headings. We'll create or modify the definition for our h1, h2, h3, etc. tags. h1 tags define the page title, h2 tags define subtitles, h3 tags define sub-subtitles and so on…

For best results, use the same font for h1 through at least h3. This is how to do it:

h1, h2, h3 { font-family: 'Open Sans', Verdana, sans-serif; font-size: 3em; font-weight: 700; }

Pretty self explanatory so far right? Next we want to override the font size for the h2 and h3 because they should descend in size. You do it like this:

h2 { font-size: 2.5em; }

h3 { font-size: 2em; }

The sizes above are arbitrary, you'll have to choose sizes that look best to you.

CSS Font Stacks

You may have noticed that in the example above, I defined the font-family as 'Open Sans', Verdana, sans-serif. This is called a CSS font stack. These are important because if for some reason your first choice of font is not available to be read on someone's computer, then maybe your second choice will be. You list the fonts in order of preference and you always want the list to end with a web-safe font and then the generic definition of that font.

In our example, the font stack would tell the browser to use Open Sans. If for some reason the browser wasn't able to process that font, it would show Verdana as a fall back (Verdana is one of the 5 web-safe fonts). And if for some strange reason, a reader didn't have Verdana installed on their machine, then a default sans serif font would appear.

Here is a guideline to creating your font stack:

First choice – this is the font that you prefer would appear for this text.
OS alternative – since some operating systems do not recognize certain fonts (for example, Helvetica will not display on a PC unless the user has expressly installed it), you would choose another alternative. Preferably this alternative would look similar to the preferred font. If your first choice has wider characters, you would want to choose alternatives that also have wider characters, etc. Use this list as a reference for the most common system fonts for both Windows and Mac: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Common alternative (optional) – just in case, you may want to include a very common font as an alternate font. Again, you'll want to use something that is as close to your first choice as you can find. Check the above resource again for alternative suggestions.
Generic font family name – The very last font would be one of the generic CSS font-family names:
- serif
- sans-serif
- monospace
- cursive
- fantasy (font-family name for Display fonts)

Summary

Phew that was a lot of information in this Beginner's Guide to Fonts for Your Blog! Let's recap quickly shall we?

First we learned how to combine fonts:

We learned about the different font categories: serif, sans serif, slab serif, monospaced, script/handwritten and display
Some simple ways to combine fonts are:
- Stick with just 2 fonts until you're more comfortable
- Combine a serif font with a sans serif font
- Create hierarchy
- Create clear contrast by combining: wide + condensed, UPPERCASE + lowercase, fancy + simple and/or contrasting colors
Choose fonts that have the right "mood" for your audience
Don't use fonts that are hard to read

Then we learned where to find free web fonts:

Why we should use text in place of images wherever possible
Google Fonts are easy and free to use
Font Squirrel is another good resource for free fonts
Other great font resources
How to identify a font you've seen on a website

Finally, we learned how to use these fonts in our sites:

How to use Google Fonts
How to use Font Squirrel and the Webfont Kit
How to incorporate the fonts you want into different areas of your site
How to create proper CSS font stacks

I really hope you've enjoyed this Beginner's Guide! If you found this useful in any way, please consider sharing it with your followers by clicking one of the social media links below. I would very much appreciate it! Now go experiment and have some fun!

If you have any comments or questions on this Beginner's Guide, please leave them in the comments below. I make every effort to reply to each thoughtful comment or question!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Hooray!! Thanks for subscribing friend! Now go check your email for your VIP Library access. (You may have to check spam or another tab in your gmail).

Marianne signature for DesignYourOwnBlog.com