bakesale | Tutorial: Using Google Fonts on DW

IMPORTANT NOTES BEFORE WE START

Like anything you put in the custom CSS box of the theme wizard, this method only works when you are viewing a page in your journal style. It will not work on the site's default schemes (listed at the bottom of the linked page under "Site Skin").

Just for your information: For the site's default schemes, you are limited to using web safe fonts. Please note the percentage on the fonts. This is the percentage of Windows or Mac users that have the font installed on their machine -- If someone does not have the font installed, they will see a default font rather than the one you selected. This is why web designers use "font stacks." Feel free to Google the term if you're curious about how to make your web safe fonts more reliable. THIS DOES NOT APPLY TO THIS TUTORIAL. THIS TUTORIAL IS STRICTLY FOR PAGES OR LAYOUTS SEEN IN YOUR JOURNAL STYLE.

The method below is only for use with Google web fonts, which are both free and hosted. The hosting is important. You may be able to adapt this for other sites that provide a similar service, but my main point is that you can't just link a font you have downloaded -- The only way people would see it that way is if they also happened to have it downloaded. Your font must be both licensed for use as a web font and hosted on a server somewhere.

THE TUTORIAL

Go to Google Fonts and find yourself a font you like. There are MANY, so you might want to use the filters on the sidebar. I'm going to use "Slabo" for our example.

Either on the main page or the page for the specific font, click the red plus sign to select the font. This will add it to your "cart," which will pop up at the bottom of the page as a black bar.

When you make your selection via the main page, when you hover over the font, some options will come up. The first and last drop-down let you change how the font is displayed on the Google page as a preview, so you can get an idea of how it will look in practice on your own page, at the size you want. This is important, particularly if you're looking at fonts to be your main post text (the body of the post, as opposed to the subject line or journal title). I can't emphasize this enough: Fancy fonts may seem fun, but if people can't read what you've written, they are pointless and frustrating. So choose wisely.

The middle drop-down relates to the sort of font you are calling to your page. The vast majority of you will want "Regular 400." If you're not sure, choose that one. Some fonts, including our example, only have this option.

Click on your "cart" at the bottom of the page and it will pop up. You'll see some instructions there.

Under Embed Font, it gives some code and tells you to paste it into the head of your HTML. You can't do that in DW without getting into layers, so we have a simple workaround.

Highlight the entire link in the code, like so, and copy it:

Then paste that URL into a new window.

You'll get a page showing a bunch of code kind of like this. Copy everything on this page.

Head over to the DW's Custom CSS page I'm sure we're all familiar with and paste the entire code into the "Use embedded CSS" box. You don't need to change anything else on this page. If you already have custom CSS, such as a theme, just scroll to the bottom and paste the CSS at the end.

That's it!

Now you're ready to call that custom font anywhere you like in other pieces of CSS on the page there, or inline via a style tag. Just make sure you know the exact font name you'll need; you can find that in the Specify in CSS portion of your Google Fonts cart.

Here are some common examples to make things easier for you:

Changing your journal title: