5 minutes reading time
(964 words)
Using Adobe Typekit with Gantry5 in Your Joomla Website
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.
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.
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.
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.
For step-by-step instructions, see Adobe Help: Using Typekit Domains
You will be presented with Javascript which we will use shortly. Next, determine how you will be using the font. You will see the class to use to invoke the font. The case of our sample, we see our default class as .tk-omnes-pro. You can choose character set, weights and fonts. If you're unsure, they have help throughout. Once you're done with your selection, PUBLISH. If you don't publish you won't be able to use the kit. If you need to make a change, just remember to re-publish so your changes can take affect.
How to add Typekit to my Gantry5 Joomla Template?
When you created your kit by clicking "Continue" on the Create a Kit window you were presented with a screen to "Install Javascript" in the head tag.
When you created your kit by clicking "Continue" on the Create a Kit window you were presented with a screen to "Install Javascript" in the head tag.
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.
There are 2 ways to add this information: 1.) Custom Content box in the Head Properties section; or 2.) Javascript element in the Assets section. Both methods puts the code inside of the head tag and both are set on the Page Settings tab of the Base Outline.
Method 1: Custom Content box in the Head Properties
Simply copy the code into the box and save.
Simply copy the code into the box and save.
Method 2: Adding Javascript element in the Assets section
The assets section is at the bottom of Page Settings. Click the '+' sign in the Javascript section at add a new element. Enter a name, I like to use 'Typekit' so I know exactly what it is. Click to save and edit. Enter the Typekit's javascript file location in the first box, and the execution script in the Inline Javascript box. Note: do not use the script tag as it will be added for you.
The assets section is at the bottom of Page Settings. Click the '+' sign in the Javascript section at add a new element. Enter a name, I like to use 'Typekit' so I know exactly what it is. Click to save and edit. Enter the Typekit's javascript file location in the first box, and the execution script in the Inline Javascript box. Note: do not use the script tag as it will be added for you.
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:
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?
Quick Tips
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:
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.
Stay Informed
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.
By accepting you will be accessing a service provided by a third-party external to https://danicodigital.com/
©
2024
Danico Digital, a Danico Enterprises Inc. brand | All Rights Reserved
Comments