Clint Patterson's Blog

rss

Read the thoughts and musings of a cultured redneck here


Using TypeKit in DotNetNuke
Specify Alternate Text
TypekitLike many web designers I’m constantly working on some side project or rebuilding/redesigning one of my sites.  I’m currently in the process of redesigning a site and since I’m a member of Adobe’s Creative Cloud I figured I should freshen up some of the fonts that I use on the site via Adobe’s Typekit. Typekit makes it really simple to integrate custom fonts into your site. In this blog I’ll walk through how to incorporate custom fonts through Typekit in your DotNetNuke site.

The first thing to do is navigate to the TypeKit.com site. Once you’re logged in you can browse the font gallery and select the font(s) of your choice.  I chose the “Atrament web” font style for the site I’m redesigning. The image below shows the screen where you view and choose the font(s) you want to use.

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.

Browser Samples in Typekit

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. 

Add a new kit in Adobe's Typekit

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.

Adding a font to a kit in Adobe's Typekit

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.

Adding a new CSS Selector in Adobe's Typekit

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. 

Copy & Paste JavaScript from Typekit

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.

Using fonts & weights in Typekit

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.

Using LocalHost in TypeKit

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.

Typekit's mobile settings

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. 

Adobe's Typekit

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.

Embedding TypeKit's JavaScript References in my DotNetNuke skin

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

Using CSS classes in my DotNetNuke module

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.

WeHuntSC.com using new custom fonts via Adobe's Typekit

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



Clint Patterson

I also blog on other sites...

And contribute to OSS Documentation...

See my pics on UnSplash