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



Central Eagle Baseball Alumni Association
Specify Alternate Text

Recently Punkie Haigler contacted me about the Central Eagle Baseball Alumni Association. He showed me the article he ran in the Pageland Progressive that is posted below:

For nearly two decades now, Coach Mitch Leaird and his staff have carried on the winning tradition of Central High Baseball. This proud program that was started by Coach Joey Mangum in 1977, has won its share of Region Championships, District Championships, and given many players the opportunity to play at the next level.

During these tough economic times, Coach Leaird has had to operate on a limited budget. As former players, we can help make sure our beloved program has the resources it needs to continue the winning tradition. We are asking you to join the Eagle Baseball Alumni Association for a yearly donation of $20. The money raised through this club will be used exclusively for the baseball program.

On Friday, April 12th, at 6:00 pm, we will celebrate Alumni Night at the home baseball game against Indian Land. We hope all former players will join us on this night to present Coach Leaird with our fundraising check and enjoy a night of great baseball and seeing old teammates and friends. Players who have joined the Alumni Association will be admitted free.

Please help us help our baseball program. Join Today!

Punkie Haigler
[email protected]
(843)672-4317

My first questions to Punkie was, can we give online, and then it dawned on me that there was another reason Punkie was contacting me. So after a few weeks of working out some technical items here online we’ve finally made it possible for anyone to give online to the Eagle Baseball Alumni Association. You can click the button here in the blog to donate. Though, as I post more blogs over time this blog will pushed lower on the page and therefore I’m going to leave the button on the home page of my site as well so that it’s easily findable.



Although the yearly donation is slated at $20 if you feel compelled to give more I’m sure Mitch, Marty, and the other coaches and players would greatly appreciate it. If you have any comments, suggestions, or want more info, please contact Punkie at the contact info he mentioned above.

Also, I wish I could make the Alumni Association game, but we're hosting a large web conference in Charlotte that weekend. So ya'll have a good one and I hope to be there next year.

Regards,

Clint


Clint Patterson

I also blog on other sites...

And contribute to OSS Documentation...

See my pics on UnSplash