Once you choose a font you can click to the “Type Tester” section to see how any specific words you type will look in your selected font. You can easily increase or decrease the font with the slider and you can also view how the font looks in various browsers on the “Browser Samples” tab as shown in the screenshot below.

Typekit uses “kits” to organize fonts for usage by designers. It’s really easy to create a new kit. Simply hover the kit section and click “Add New Kit”. As you can see from the screenshot below, I've created a kit for each site on which I use custom fonts. You can see how to add a new kit in the below screenshot. 

Now that the "kit" is ready I need to add some fonts to it. Once you decide on a font you simply hover over the font and click “Add to Kit” and the font will be added to the kit for which you are currently viewing as denoted in the below image.

After you add a font to a kit you can go into the "kit editor" to further customize. Once you’re inside the kit editor you can customize various settings and styles that make the custom fonts appear on your site. You can simply add the CSS selectors that you’re using on your site & they will then render showing the custom font that you've just selected in Typekit. Notice in the below screenshot where I'm adding " .ANewSelector " class in Typekit's editor.

Now at this point you’re probably wondering what is linking your site & Typekit together so that the selectors know which font face to use. In the kit editor Typekit gives you 2 lines of JavaScript that you need to include in order to make things work. Just copy and paste that script (shown in the below screenshot) into your code and you’ll be ready to rock. 

If you wanted to access specific weights & styles via your skin.css file you can click on the “Using weights & fonts in your CSS” option which will give you the below screen allowing you to copy the CSS necessary for your specific font & weight.

Now if you did click the “Copy CSS” option you would end up with some CSS that resembled the below:

font-family: "atrament-web",sans-serif; font-style: normal; font-weight: 400;

Once you click publish you will be ready to go. I should also mention that if you want to develop or test out styles locally you can also enter “localhost” in your kit editor settings and that will make your local sites work with the new custom fonts.

If you were concerned about how your styles would display on mobile devices you can click into the "Mobile Settings" section of the Typekit editor as seen in the below screenshot.

Now to make all of this active we need to click the big green “Publish” button at the bottom right hand corner of the kit editor screen which you can see in the below screenshot. 

At this point we’ve successfully chosen our fonts and published them linking the custom fonts to our site. Now we just need to reference them in our skin's .ascx file, the skin.css or specific modules. In my skin’s .ascx file I’ve added the 2 lines of JavaScript to reference TypeKit.

Then in my HTML Module I simply referenced the CSS classes that I specified earlier in the Typekit selectors area.

And that's all it takes to get everything lined up. You can see an example of the redesigned home page (running locally) using the custom font “Atrament web” that I selected earlier.

Typekit makes it extremely easy to use custom fonts in your site. If you’re a Creative Cloud member you should check it out. I hope this blog has been helpful to you with integrating custom fonts in your DotNetNuke sites.

Regards,

Clint