Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
With the arrival of CSS3, HTML5 and legitimate web font standards, we are quite privileged to have the ability to use gorgeous fonts on our web sites. This means, we don’t have to rely on the boring old Georgia, Arial or others to decorate our typography. Today, we will see how we can use a popular web font service by Adobe, Typekit, to bring our web design to life.
Typekit is a web font service that serves thousands of high class fonts by various foundries to your website. It has 4 pricing plans, however we are going to use the trial version for our demonstration purposes.
Typekit is great for you because it scales easily. Typekit allows you to pay for how much you use. So for instance, it works with a small site with thousands of page views per month to a much bigger site with millions of page views per month. Typekit is trusted by WordPress, New York Times and many more. Secondly, it has a great collection of fonts by high caliber font foundries.
Over 700 foundries are supplying thousands of different fonts to prettify your website. Third, it boasts cross compatibility which means Typekit works on all browsers. With this said, fonts are served from Typekit servers’ meaning high performance and speed become the hallmark of your website. Finally, designers have the ability to customize fonts from within the dashboard.
How to use Typekit?
To begin using the Typekit, click the sign up button. This will prompt you to create or sign in with an existing Adobe ID.
Once signed into the Adobe network, you will be taken to the Typekit fonts dashboard. Alternatively, you can click here. Remember, you can only select two fonts per 1 website with this free version. It can be two different fonts, or 1 font family with two different font types.
So select your favorite font and click “add to kit”. Here’s how. Once you click the “Add to Kit” button, it will instantly say, “In Kit”. Congratulations, you’ve added your first Typekit font to your kit. For demonstration purposes, the font is a gorgeous Museo Sans by exljbris Font Foundry.
Once you have added a font to the kit, look out for the green button on the top right corner of your page. Click the button that says “Launch Kit Editor”. This will open the kit editor and allow you to customize a set of features if you want. You might be looking to choose only the font features that you really need, so you can easily minimize the load times and file sizes.
Once you’re done setting the weight and styles for your chosen font, click the button on the bottom right that says “Next”. This will allow you to copy the JavaScript that is essentially the code that does the trick. You only do this once. When done, you simply click “Publish”. Remember, if you need the code again, you can use the Kit editor’s navigation bar which has all the options in it you’d need.
You must now paste the JavaScript code into the <head> section of your website.
To use the font from your Typekit kit, you must click the “Using fonts in CSS” link in your Kit editor, which can be found on the top right side of your window. Once there, it shows you the various ways you can use Typekit in your web design process. Please see the image below for an example.
The Perspective
In case you got lost, here is a sample template for you to use, which might help you streamline the process of implementing your first Typekit font on your web design project.
<html>
<body>
<title> Typekit Tutorial </title>
<head>
* Enter your Typekit JavaScript code over here *
<style type=”text/css”>
p { font-family: “sample-font-name”, sans-serif; }
</style>
</head>
<p> This paragraph element is using a Typekit font. Yay! </p>
</body>
</html>
