Join Laura Franz for an in-depth discussion in this video Applying Calluna to your web site, part of Choosing and Using Web Fonts.
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.
Author
Released
6/27/2012- Explaining the history of text fonts, from Old Style, Transitional, and Modern to Slab Serif and Sans Serif
- Understanding font classifications
- Setting up a Typekit account
- Choosing a quality font based on forms, spacing, and weights and styles
- Accessing fonts from various sources
- Implementing fonts with the @font-face syntax
- Looking at how fonts affect the look and feel of a web page
- Changing font styling to improve readability
- Making various font weights and styles work correctly across multiple browsers
- Pairing fonts (headline and text, two fonts in text, and so on)
- Setting fallback fonts
Skill Level Appropriate for all
Duration
Views
Related Courses
-
Typography for Web Designers
with Laura Franz6h 25m Appropriate for all -
Creative Inspirations: Doyald Young, Logotype Designer
with Doyald Young1h 41m Appropriate for all
-
Introduction
-
Welcome58s
-
Using the exercise files1m 47s
-
-
1. Getting Started
-
2. Venetian Fonts
-
Identifying a Venetian font4m 46s
-
Choosing a Venetian font3m 47s
-
3. Old Style Fonts
-
Choosing an Old Style font4m 30s
-
4. Transitional Fonts
-
Choosing a Transitional font6m 36s
-
5. Modern Fonts
-
Identifying a Modern font7m 50s
-
-
6. Slab Serif Fonts
-
Choosing a Slab Serif font3m 58s
-
7. Other Serif Fonts
-
Choosing "Other" Serif fonts10m 12s
-
8. Transitional Sans Serif Fonts
-
9. Geometric Sans Serif Fonts
-
10. Humanist Sans Serif Fonts
-
11. Handwritten Fonts
-
Choosing a handwritten font8m 17s
-
12. Pairing Fonts
-
13. Script Display Fonts
-
Understanding Script fonts2m 19s
-
Setting fallback fonts2m 55s
-
-
14. Wood-Type-Inspired Display Fonts
-
Setting fallback fonts2m 31s
-
15. Art Deco Fonts
-
Setting fallback fonts2m 48s
-
16. Futuristic Fonts
-
Setting fallback fonts2m 22s
-
Conclusion
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Applying Calluna to your web site