Applying Calluna to your web site

Let's take a look at the page we're going to add these fonts to. This is the original site for the course called georgia_site.html. It's a site for a city called Springfield, Rhode Island. The site uses Georgia Regular for the text, links, and some headings. It uses Bold for other headings, and over here on the side, it uses Italic for a quote. So for now, these are the weights and styles we're going to use. We're going to change the site, so it uses Calluna.

Open the original Georgia site in your text editor. I use TextWrangler, but you can use any text editor you prefer. If you're using Dreamweaver, I recommend working in code view. We'll start by re-saving the file. Save it as calluna_tk_site.html. You can save it in the original folder, since we won't rewrite anything, and we won't be touching the images or CSS for the site, nothing will get rewritten.

But now let's take a look at the code. Usually, I put all the CSS in a CSS file, and then connect the HTML documents, but for this course, I've put all the typography related CSS into the head of the HTML document. There is quite a bit there. And after the CSS, you can see that the HTML starts. The rest of the CSS is contained in a CSS document called springfield.css, and we won't be making any changes to that file. What we need to do is add Calluna to this file, so the browser pulls in Calluna, not Georgia.

So the first thing we need to do is grab the JavaScript code from Typekit. Now, I had put my kit editor away, and if you ever do that, you can just click on the screen button called Launch Kit Editor, and go to Embed Code, and then you can highlight and copy the code here. We did also put this code into a Word document, so if you wanted to, you could get the code from there as well. Now, back in the HTML document, we put that code as the first item in our head. So I put it above the title, pasting it in, and now I have a code that tells Typekit to use fonts from that kit in this file, but I haven't told it yet which fonts I want to use.

You can see here in my universal selector that the file is still using Georgia. So now we need to go and get the font family name for Calluna. Click on the link called Using fonts in CSS, and we can see that the font-family is simply Calluna. I highlight that, including the quotation marks, and copy it, and paste it into my CSS, including a comma, so that I now have a font stack. If for any reason Calluna doesn't work, the site will use Georgia, or a default serif.

Now we need to set our bold and italic properly. Let's go back over into Typekit, scroll down to a link here called Using Weights & Styles in CSS, and we can see that the Regular Calluna is 400, and the Bold is 700. Now, these are default font weights, so if you want to just keep your normal fonts set to normal, that's fine. The browser will look for the normal weight version of the font, and will pull in the closest weight, which is 400. The 700 means Bold. So if you just keep it set as Bold in your CSS, the browser will look for the Bold version of Calluna, and if it doesn't find one, it will use the closest thing, which is the 700 weight.

So you could theoretically keep them set as Normal and Bold in your CSS, but it's a good habit to use numerical values when you're using Web fonts with multiple weights and styles, because some fonts, as we'll see in this course, don't follow the 400, 700 rule for regular and bold. So you should always check these numbers, and use them in your CSS. So back in the CSS, we're going to set the universal selector to 400, and then the places where we use bold are in the h4, we'll change that to a 700, and then the strong, we'll change that to a 700, and that's it.

I'll save this, and then go over to the browser and take a look at it. And I'll reload, and it's still Georgia. That's because Typekit can't interact with your page and serve the fonts unless your file is on a server. So we need to put our file on a server. I'm using Mozilla. I like the drag and drop capabilities, but you should use whatever FTP application you prefer. On the left is my server space, and on the right is the exercise file.

We need to put our Calluna file over into your server space, and we'll also need the springfield.css file and the images so it will work. Then we need to go and view the page from the server, and it's now in Calluna. It's a very slight shift, but you can tell -- I'll zoom in here -- you can see how the crossbar on the e is now rising. I'll zoom back out. So we have Calluna working in our site.

You'll remember I had you name your file with a tk in it; the tk stands for Typekit. This is a habit I've gotten into, because all the other fonts I use will load when the files are on my Desktop, and I used to freak out when I try to view a site, and the fonts didn't work. I had to remember to put my files on my server. So now when I'm creating a new site, I'll often add the tk somewhere. Usually I put it in the folder name, or in a text file inside the folder, so the people viewing the site don't see the tk, but it helps me to remember to upload my files to the server in order to see the fonts.