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.
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.
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.
If you ever need to put some custom styles in the Telerik Rad Editor of DotNetNuke HTML module it can be a little frustrating if you don't know exactly where to put the files. It's actually a simple process. I cut a quick video walking through this process and wanted to post here in hopes of helping someone who may encounter this same issue.
Our crew had a blast last year at DNNWorld 2011 so we eagerly looked forward to this year’s conference all year long. This year DNNWord was moved up a month from November to October which was a welcomed change by me as November is the best part of deer hunting season in South Carolina. As soon as the early-bird registration came out I registered.
To me, DNNWorld is like a combination of a family reunion, a pep rally, and information-loaded-boot-camp. It’s really hard to describe and put into words, you just have to experience it. There are great people to meet, prizes to win, awesome sessions to inspire you and get your creativity flowing, a side-conversation constantly going on via social media, competitions to enter, arrows to shoot at people, good times to be had, and trees to be climbed. It’s fun and I always leave energized about the future. There was no way we’d miss it.