You've hired a graphic designer to create the new look-and-feel of your website. They've come back with a great design that you absolutely love. You give it to your web developer and they tell you the fonts the designer has chosen are not in Google Fonts or other means but can be purchased for a somewhat high fee.
What do you do?
Here's one way to solve it, use Adobe Typekit.
What is Adobe Typekit?
Adobe Typekit is a service that makes thousands of fonts and foundries available through subscription or purchase. By subscription means either with a paid Typekit plan or through a Creative Cloud plan. There is a free plan with limited use if you want to try it out. The fonts work with applications as well on websites, which is why we're discussing it today.How to access Adobe Typekit?
To get started go to typekit.com. If you know your font, say for instance you got it from your designer, you can enter it in the search box. If you're looking for a font, you can search by foundry.
What is a font foundry?
A company that designs and distributes typefaces. Sometimes you see it referred to as a type foundry.
There is also a list available for you to browse. These lists are created around a theme to help you browse the 1000x of fonts available. For example, you're tired of Helvetica and want something similar, there is a list of Alternatives to Helvetica
to get you started.What are Synced Fonts?
To use fonts you find in Typekit with Creative cloud desktop applications they have to be synced to your computer. We won't be covering this today as our focus is on the kit for your website.How to create a Kit?
So you've found your font and now you want to add it to your website. The first thing you need to do is create a Kit. From the Fonts page or your favorite font page, there is a menu item in the upper right corner that says "<> Kits". Click it. You'll be presented with a window that asks for a name and description for the kit.
You will be asked for the domain you want to use it on. You can use a wildcard at the beginning only, such as *.domain.com. Do not use "www" or the protocol "http" or "https". If your site is in development, you can use localhost, your IP address or your dev server. You are limited to 10 domains in this list. If you need to add to more than 10 domains, create a new kit.
How to add Typekit to my Gantry5 Joomla Template?
For the next steps, we're going to assume you already have your Gantry5 template from gantry.org, inspiretheme.com, rockettheme.com or other template house installed. If you need help, contact us.
Method 1: Custom Content box in the Head Properties
Simply copy the code into the box and save.
The Kit is installed, now what?
So, your new font is available through the Kit you've published and added to your template. How do you use it? You can use in your inline css by calling the default class (remember our default class of .tk-omnes-pro) or one you added. If you want to add to your CSS, click 'Using fonts in CSS' and copy the information you see into your CSS file. Here's what ours demo kit information looks like:
notice the copy icon on the right?
You have your font, your font kit and now you're on your way to have your site, your way. Here are 3 tips that we like to follow:
- Before adding to live site, add to test or dev site first
- Create kit with descriptive name and add a description on how it's used
- Add to Base Outline and inherit through the other outlines
Give it a try (on a dev site) and let us know what you think. Need a hand? Contact us, we'd be happy to help.
Disclaimer: The information, opinions and images are solely those of Danico Enterprises Inc. We are not affiliated with nor compensated by the companies mentioned in this post.