Friday, August 14, 2009

Using new fonts from Kernest on Blogger

Are you sick of Times and Helvetica? Not to mention Trebuchet, Gadget, Arial, and Courier? It seems crazy in this day and age where you can output a gorgeous print document with beautiful fonts that the Web still be limited to a very short list of fonts. Especially since CSS has been capable of handling many more fonts for more than 10 years. But font foundries were wary of setting their fonts free and browser companies like Microsoft, Netscape, and Apple couldn't quite agree on what font format to support.

Thankfully, not everyone has been waiting around to see what shakes out, and have taken matters into their own hands. One of these guys is Garrick Van Buren, a developer in
Minneapolis. He's gotten permission to make a big collection of fonts available on his server, for free, and figured out how to serve the appropriately formatted font to each browser as it requires. He told me there will be upwards of 400 new fonts by this weekend.

I've been itching to experiment with some new fonts... so I thought I'd give it a whirl. You can see the results right here in my blog. The title of my blog, Pigs, Gourds, and Wikis as well as the sidebar headers, date header, and post headers are all set in Taggeschrift, a sort of steampunk style font that matches the retro-newness of the topics I talk about here.

Here's how I did it. (Note, I haven't posted all the screenshots to this article, some are linked so they don't distract so much from the text. If they're particularly big but necessary, I insert a smaller version. Click on it to see the full version.)

First, go to Kernest.com and log in. Make sure you write down your password because there's not an easy way to recover one yet if you forget it (like I did :) though Garrick is working on it.

Maybe it's me, but once I logged in I wasn't quite sure what to do.

Kernest, now what?

So I'll tell you... go looking for fonts. See if you like any. Click on the Find more fonts by... link to see all the fonts in Kernest's collection sorted by style, license, foundry, designer, or family.

Kernest, Find more fonts by...

Once you're within a category, you'll see samples of the fonts themselves. If you're curious about a font, click it's sample text.

Kernest Tagesschrift sample

You'll get to the font's page on Kernest (notice the URL is http://kernest.com/font-name). You can type new sample text in the box at the top, perhaps to see how a particular header might look. And you can also just view the font at various standard sizes.

Kernest Tagesschrift main page

To use a font on your site, you need to add it to a project. A project is just another name for the web site where you're going to use the font. You add a project to your profile by adding its URL to the New website? box. If you've already created the project, it will appear in the USE '[THIS FONT]' ON YOUR WEBSITE box, and all you have to do is check it's name or URL. Otherwise, type its name in the New Website? box. Either way, you'll then click the Add to Selected Websites button.

Kernest Add font to project

A message will momentarily flash at the top of your screen saying the font was added to your project, but I didn't find it particularly obvious how to use that information. The key is in the second sentence: Click project name's for embed code. (It means Click the project's name to get the embed code.)

So that's what we'll do. In that little beige box where you just clicked "Add to Selected Websites" you should now see the title of your project turned into a link. Click it.

Kernest - Go to project

This will bring you to your project page, found at http://kernest.com/projects/[your project name], where your project name may have the dots replaced by dashes. And it's where you'll find the needed code.

Kernest - Project page

You basically need two chunks of code, as my 3rd edition HTML book explained more than 10 years ago. First, you need to import the font using the @font-face rule. Kernest makes it relatively easy by creating a CSS style sheet on its server that contains the rule that you'll need for your site. To use it all you have to do is click in the PROJECT EMBED CODE box, and copy everything that's there. If you want, click the Show Raw CSS link to see exactly what the style sheet looks like. It's pretty straightforward. The link will look something like this:

<link href="http://www.kernest.com/www-pigsgourdsandwikis-com.css" media="screen" rel="stylesheet" type="text/css" />

(You can get more information about linking stylesheets on page 129 of my HTML, XHTML, amd CSS, Visual Quickstart Guide, Sixth Edition.)

If you like, you can copy the @font-face rule out of the style sheet and paste it directly into your own CSS style sheet. It's up to you. The advantage to leaving it on Kernest is that if you add a font later, the style sheet and rule will be automatically updated.

Now, where do you put that "embed code" or link element, which is nothing more than a link to the CSS stylesheet on Kernest? Anywhere in the <head> area of your Web site, preferably up near the top.

In this example, we're going to use it for a blog, so we have to dive into Blogger's innards. Go to your Dashboard on Blogger, and click Layout under your desired Blog.

Blogger, Layout settings

Then choose Edit HTML from the Layout tab.

Blogger, layout settings edit html

Now you'll see the HTMLly underbelly of your blog. Right there at the top, you should see the <head> section where you can stick in the link to your new Kernest stylesheet. Paste it right in.

Kernest - add css link to blogger

OK, now Blogger can import the font, but it doesn't know where you want to use it. In a simple Web site, you'd just need to set up some font-family CSS rules and apply them to different selectors, perhaps you want the h1 elements to use one font and the body to use another.

Blogger however, has another layer of information that goes on between its database and the output, namely a number of variables. Currently, Blogger has five text variables. In the Minima template that I'm using as a base, they're defined right up at the top of the stylesheet, just below the <head>. Scroll down a bit and you'll see them. The first chunk of them are variables that affect the color of objects, and the last five have to do with fonts. (It's set up this way so that you can change them by using the Fonts and Colors tab, but we're going to bypass that simpler but very limited system.)

Kernest - add Tagesschrift to blogger variables

The first of the five text variables is called "bodyfont". It affects every bit of text on the page, including, but not limited to the body text, the sidebars, the headers, everything. Think of it as the base style for your entire body.

The second variable is "headerfont" but it really only applies to the Sidebar headers and the Date Header (which appears above blog posts). This is a good place to use your new font. In Blogger's Minima style, there is a list of fonts that will be used, in order of preference. Replace the first font on the list with your new font from Kernest. You should probably use quotes if you've got a multi-word font name, otherwise, don't.

Variable number 3 is "pagetitlefont" and is only used in the Header area for the title of your blog. I used Tagesschrift here too.

The fourth text variable is called "descriptionfont" and is used exclusively for the description text that appears below the title of your font in the header. My steampunk font is a bit wobbly for that little text, so I left it in Trebuchet.

The last text variable is "postfooterfont" and as expected, affects the text that appears in the footers below a blog post that contain the name of the blogger, the time the blog was posted, whether or not there are comments, etc. Strangely enough, it also is used for some bits and pieces of the sidebars (though not the sidebar headers).

Of course, all this is all specific to Blogger's Minima template. You may need to dig in and experiment with your own template to see what each variable applies to.

Even when you've figured out the variables in a given Blogger template, you'll realize that some of the variables are way too broad (like bodyfont) and some are way too specific (like descriptionfont), or at the least, there aren't enough of them. That's when you dive into the CSS rules themselves. Scroll down a little further and you'll see the CSS rules that are applied to each and every element on your Blog.

Don't know what kind of element something on your blog is? View your blog and View source. Search for the text in the element and then sleuth out what kind of element it is. Then go back to Blogger's Edit HTML page and find the offending element. Then change the font-family, (or the size, style, or color) as you like.

For example, to change the font of the Blog post titles, I had to scroll down until I found the .post h3 selector which controls them. Then I added the font-family: 'Tagesschrift'; rule.

kernest - add Tagesschrift to blogger variables esp to h3

Use Blogger's Preview button copiously to view the changes to your blog before you publish them and make them live. Be sure and test it in as many browsers as you can. As far as I can tell, Kernest's font serving system works great at least in Firefox, Safari, and Internet Explorer, which covers the vast majority of my visitors. And it looks cool!

Here's what this site looked before Kernest:

Kernest Before

And here's what it looks like now: (course you can see it right here as well):

Kernest - After

14 comments:

  1. Thanks for the post! Linked through from the Kurnest Google group post by Garrick Van Buren.

    Felt kind of bad to see 0 comments on such a well laid out article, so here is one of appreciation.

    Years back there was an article about font replacement on A List Apart that came with a warning that font replacement was an experimental method. While I was still struggling to understand CSS and wondering if some other standard besides HTML would dominate the internet, I still thought rendering sites with specific fonts that the user might not have on their machine was a major design consideration that deserved it's day. Today I discovered Kernest and it seems that day has come. Hooray!

    ReplyDelete
  2. Hey Liz!

    Just in case you didn't already know. Your blog is mentioned under "What people are saying" on the Kernest home page-

    “Kernest's font serving system works great at least in Firefox, Safari, and Internet Explorer, which covers the vast majority of my visitors. And it looks cool!” - Liz Castro, Pigs, Gourds, and Wikis

    The above quote is a link to this page's 08-09 archive.

    ReplyDelete
  3. Hey, thanks for the heads-up. That's great!

    ReplyDelete
  4. I've got it! But i'm having trouble controlling the font size.. any suggestions??

    ReplyDelete
  5. Hi there, I haven't seemed to be able to get it to work either... is it something that will update overnight? I've had that happen with some things I've added to blogger in the past... Guess I'll see :o)

    ReplyDelete
  6. @Miss 'Chievous: use the font-size property!

    @EmilyKate: What's not working?

    ReplyDelete
  7. Liz hi, it works now! However, right at the very top of my blog, over the blogger navbar, "font-family: 'Steinem';" appears printer in the centre, which seems weird!
    Miss 'Chievous, I've been changing the size of my font very easily, you just go into the Fonts and Colours tab, and in the scrolldown box click on whatever post title font, post footer font. The name of your font obviously is not going to be in the blogger selection to the right, but a little dot will fly into one of them anyway. Don't worry that doesn't change it back to blogger font! Anyway from there you just click the 'smaller' or 'larger' hyperlinks.

    ReplyDelete
  8. I wanted to thank you for this tutorial. I read it yesterday and started implementing it immediately. I am rather proud of how it turned out. I used the same font you did because I just thought it was so cool. Of course once I put the new font on I had to revamp my whole blog so it would be as pretty as the font.

    Melissa

    ReplyDelete
  9. thanks, but did you change your header font, cause it's no longer showing at the top of this page.

    ReplyDelete
  10. It worked, took me half the day but I got it. Thank you!! the only thing I can't figure out is..... my side bar titles and dates above the posts are all in CAPS. they were not written that way but they show up that way. Cant figure out how to make it look like This and not THIS. I try to re write them but it keeps showing up in CAPS. grrr Any ideas?

    ReplyDelete
  11. It works fine in IE 6.5, 7, 8 but don't works in Firefox 3.6 when using remote font. This because Firefox identify remote font as cross-site scripting.

    ReplyDelete
  12. Thank you sooooo much for this tutorial! I have non-existent html-fu but I managed to change the standard font on my blog's post titles to a cute one from kernest. I can't believe it was that simple and that it actually worked! ^o^ Thank you, thank you, thank you!

    ReplyDelete

More of my books