Installing Typekit on Tumblr
If haven’t used TypeKit yet, you should definitely try it out. TypeKit allows you to add creative and professional looking type faces to your website - beyond the basic fonts supported by most browsers/OSs. The service packages the fonts and sends them directly to the end user’s browser, enabling your website to provide a consistent visual experience across browsers and operating systems. It’s provided on a freemium basis with a step up in cost based on website traffic and number of sites supported. The lowest level service allows for up to two fonts on one unique domain with a maximum 25,000 unique page views of traffic per month. For the average blogger, this is probably all you need. To get started with an account, just visit TypeKit and use your domain to signup.
There are a couple of ways to use TypeKit on Tumblr. If you’re lucky, your theme will support TypeKit out of the box. I use a WooTheme for my Tumblr blog. It has a lot of UI supported configurability out of the box including the ability to type in my TypeKit ID under the “Appearance” tab:
To get the TypeKit ID for your website, launch the “Kit Editor” on TypeKit.com for your website and then click “Embed Code”. Your TypeKit ID is listed in the bottom right hand corner of the popup:
If your Tumblr theme does not support adding a TypeKit ID through configuration, you’ll have to add the HTML code directly. To do so, copy the included HTML in the above “Embed Code” section. Then, go to customize your blog on Tumblr, select the “Theme” dropdown, switch to “Use Custom HTML”, and paste the copied HTML into the <head> section of the document:
If you load your website and it looks good - you’re golden. If not, you’ve got some troubleshooting to do. CSS is incredibly tricky to troubleshoot, especially when multiple stylesheets are being loaded from different domains. When troubleshooting Tumblr/TypeKit integration, your problem is probably going to fall into one of these two buckets:
- Domain Match Errors
- Styled Elements Errors
1. Domain Match Errors
These occur when the configured domain in your TypeKit editor is not correct. For me, the problem occurred because I was using TypeKit on a sub-domain on my alexbovee.com domain. If you have a subdomain such as “blog.yoururl.com” setup, you’ll need to be sure that TypeKit references this domain correctly. You can check this by going to the Kit Editor and then clicking the “Kit Settings” link:
Here, you’ll see the domain you setup before. If your blog is on your root level domain, just make sure the domain is “yoururl.com”. If you are using a sub-domain for your blog mapped to your tumblr domain, you’ll need to be sure your domain is either “blog.yoururl.com” (where blog => your sub-domain) or “*.yoururl.com”. The wild-card domain selector will enable using this TypeKit on your root and sub-domains.
Note: Be sure to select “Publish” to save these changes and have them pushed out to TypeKit content servers.
2. Styled Elements
If your issue isn’t a domain configuration issue, it’s probably a CSS application issue. Checking that elements are styled correctly is a little more difficult. My go-to for this is to use the Firefox add-in Firebug to inspect the elements. If you don’t have Firebug, it’s an absolute go-to for troubleshooting all things browser, HTTP, and CSS related by allowing you to visually and textually inspect elements on a page, sniff HTTP packets, and more. To check an element to make sure it’s styled correctly with your font, you can right click it on the page, then select “Inspect Element”:
This will open Firebug with that HTML element selected. Next, click the “Computed” box in the Style viewer on the right-hand side:
This will give you the computed CSS style for the selected element. If you don’t see your font (as named in your TypeKit) in the “font-family” section, something is going wrong with your element styling. From here, check the following:
- Make sure the font-family name you use in your styling corresponds to the style name in the typekit. You can find this style name by going into the TypeKit Editor and clicking the “Advanced” link next to the style in the “Selectors” section.
- You can use custom “Selectors” in the TypeKit editor to apply TypeKit fonts using CSS that’s sent to your browser by TypeKit. You add these selectors to HTML tags or classes in the TypeKit editor under the “Selectors” section. For example, enter “h1” into the selector box and click “Add” to apply this font to all “h1” elements on your site. Be sure to click “Publish” to save these changes.
- When a TypeKit is loaded, it loads a CSS file from the TypeKit content servers. You can see this file by clicking the “CSS” tab in Firebug, and then selecting it from the drop down (it will be the only css file from the domain “typekit.com”).
This is a great way to determine if your fonts are being correctly loaded from the TypeKit server. If you just added custom selectors, and they’re not showing up, chances are that the file has not yet been pushed out or you didn’t “Publish” it. On the other hand, if no elements are in this CSS file, there’s a good chance that your domain is configured wrong in the TypeKit editor.
Good luck!
1 year ago
