Welcome to the MyFonts Webfonts Random Demo Kit. This document presents the webfonts in your Kit and explains how to use them on your webpage.

This MyFonts Webfonts Kit is a collection of files that allow the included webfonts to be used in the majority of modern web browsers, including Microsoft Internet Explorer for Windows, Mozilla Firefox, Google Chrome, Apple Safari, Opera, and some others. Since different browsers accept webfonts in different formats, your MyFonts Webfonts Kit provides all necessary code that will detect the browser and provide the webfont in the correct format. All you need to do is copy-paste some sample code, and make some edits to your CSS. Here’s how.

1. Upload your Kit

Upload the contents of the Kit to your server. This is typically done using an FTP program — the same way that you upload other files to your website. It’ll be easiest if you upload all the files and folders to the root folder of your site, but you can also create a subfolder and place the Kit files and folders there.

Note: You do not need to upload the StartHere.html file or the Start here files folder.

2. Connect your Kit to your website

Include a reference to the Kit connector file. The CSS file in the Kit’s main folder is called the Kit connector file. You should place a reference to this file in the head section of your website’s HTML code. Make sure that the reference appears on all HTML pages of your site.

This will “connect” the webfonts from the Kit to your website. The exact location of the Kit connector file will depend on where you placed the Kit on your website. If you uploaded the Kit to the root folder of your site, then you can just copy-paste the code below. If you uploaded the Kit to a subfolder, you’ll need to adjust the path to the Kit connector file.

Most modern websites use templates to dynamically produce HTML pages, so you’ll only need to include the reference in the template’s head section. However, you your website is built using individual static HTML pages, you’ll need to include the reference on all those pages.

In any case, the link to the Kit connector file MUST be preceded by the HTML comment as shown below. The entire snippet that you should place in the head section of your HTML code looks like this:

<!--
/*
 * MyFonts Webfont Build ID 827107, 2011-05-30T04:57:03-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Classic Round Medium
 * URL: http://new.myfonts.com/fonts/durotype/classic-round/medium/
 * Foundry: Durotype
 * Copyright: Copyright &#x00A9; 2010-2011 Durotype, www.durotype.com. All rights reserved.
 * License: http://www.myfonts.com/viewlicense?1056
 * Licensed pageviews: unlimited/month
 * CSS font-family: ClassicRound-Medium
 * CSS font-weight: normal
 * 
 * (c) 2011 Bitstream Inc
*/


-->
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsOrderM2953017.css">

3. Apply the webfonts to CSS styles

Assign the webfonts to tags, classes or other CSS selectors. Now you need to decide where on your site you would like to use the webfonts. Would you like to use one webfont for all text on your site, including body and headings? Or perhaps you have selected a headline webfont and a body text webfont? Using CSS, you can assign webfonts to specific HTML tags, classes or other CSS selectors. There are several ways to do it, and we’ll explore more advanced options later.

A simple method is to add a CSS style block in the head section (below the reference to the Kit connector file), and then assign the family names of the webfonts that are included in the Kit to separate CSS classes. Here’s how it is done:

<style type="text/css">
.ClassicRound-Medium { font-family: ClassicRound-Medium; }
</style>

Instead using these class names, you can assign the font-family to any valid CSS selector, such as an HTML tag name, a class name, an ID, or a combination of those.

Please refer to the sample HTML below to find out which font-family name refers to which webfont.

Sample HTML

Below is the code for a simple HTML page that uses the webfonts from your kit.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--
/*
 * MyFonts Webfont Build ID 827107, 2011-05-30T04:57:03-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Classic Round Medium
 * URL: http://new.myfonts.com/fonts/durotype/classic-round/medium/
 * Foundry: Durotype
 * Copyright: Copyright &#x00A9; 2010-2011 Durotype, www.durotype.com. All rights reserved.
 * License: http://www.myfonts.com/viewlicense?1056
 * Licensed pageviews: unlimited/month
 * CSS font-family: ClassicRound-Medium
 * CSS font-weight: normal
 * 
 * (c) 2011 Bitstream Inc
*/


-->
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsOrderM2953017.css">
<style type="text/css">
.ClassicRound-Medium { font-family: ClassicRound-Medium; }
</style>
</head>
<body>
<p class="ClassicRound-Medium">Hello World in Classic Round Medium!</p>

</body>
</html>

The result of which looks like the following:

Individual webfont showings

The remaining section of documents shows each of the webfonts included in your Kit in more detail, and explains some more advanced techniques of using them.

body { font-family: ClassicRound-Medium; }

h1, h2, h3, h4, h5 { font-family: ClassicRound-Medium; font-weight: normal; }

.ClassicRound-Medium { font-family: ClassicRound-Medium; }

<p class="ClassicRound-Medium">Hello World!</p>