## MyFontsWebfontsOrderM2953017

Classic Round Medium

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:

Hello World in Classic Round Medium!

## 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.

Classic Round Medium

36 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

30 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

24 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

21 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

18 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

14 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

12 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

10 A very bad quack might jinx zippy fowls. Pellentesque ac felis eu tortor convallis iaculis vitae eget neque. Sed leo est, volutpat sed laoreet non, convallis at metus. Nam facilisis risus eget orci posuere sodales. Aliquam eleifend quam vel ipsum euismod aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ultrices tellus. Aliquam quis metus diam, id commodo mi. Aenean ac urna mi, sit amet gravida lacus. Aliquam urna nunc, pulvinar vel egestas ac, tincidunt non dui. Maecenas in orci sit amet lacus mollis viverra eu vitae arcu. Vestibulum eros quam, viverra et fermentum ac, ultrices sit amet risus. Nulla tristique magna vel urna tempus cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu nisi, fringilla nec pharetra ac, dictum eget lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam viverra lectus nec erat viverra gravida. Nulla leo dolor, tristique elementum tempor sed, malesuada eget libero. Praesent congue, ipsum nec elementum tristique, dui enim fermentum nunc, in eleifend felis arcu at nulla. In augue massa, lobortis in fermentum non, euismod vel libero.

Mauris feugiat porta tincidunt. Cras eget dui diam, a viverra tortor. Proin dictum, diam ut vulputate imperdiet, enim nulla blandit est, in accumsan erat nisl in dolor. Nunc ante orci, tincidunt non luctus quis, congue a sem. Nulla non vehicula nisi. Vestibulum suscipit egestas massa eget convallis. Curabitur sapien magna, imperdiet eu consequat non, bibendum vel magna. Nulla neque lectus, lacinia vitae commodo scelerisque, tempus sit amet tellus. In semper arcu ut massa egestas posuere.

Here are a few examples how you can use the Classic Round Medium webfont on your site.

If you’d like all text on your HTML page to be formatted using this webfont, you need to assign it to the `body` element. Use the following CSS declaration in the `style` block of the `head` section of your website:

    body { font-family: ClassicRound-Medium; }

If you’d like all headings to be formatted using this webfont, you need to assign it to the `h1…h5` elements. Use the following CSS declaration in the `style` block of the `head` section of your website:

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

You can also assign the webfont to a specific HTML class, which will allow you to easily mix different webfonts on the same page. Use the following CSS declaration in the `style` block of the `head` section of your website:

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

Then, use the class as follows in the `body` section of your HTML:

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

You can use any valid CSS selector (such as an HTML tag name, a class or an ID, or a combination of those) if you want to format a specific portion of the document.