gord
Gord-Regular
Welcome to the MyFonts Webfonts . 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, code and fonts. Since different browsers accept webfonts in different formats, your MyFonts Webfonts Kit provides all the necessary code to. 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 the Kit to your website
Include a reference to the Kit CSS file in the Kit’s main folder. 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. 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 font files in the CSS file.
<!-- /* * MyFonts Webfont Build ID 887783, 2011-07-28T05:37:24-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: Gord-Regular * URL: http://new.myfonts.com/fonts/typodermic/gord/regular/ * Foundry: Typodermic * Copyright: (c) 2010 Typodermic Fonts. This font is not freely distributable. Visit typodermic.com for more information. * License: http://www.myfonts.com/viewlicense?1056 * Licensed pageviews: unlimited/month * CSS font-family: Gord-Regular * CSS font-weight: normal * CSS font-style: normal * * (c) 2011 Bitstream Inc */ --> <link rel="stylesheet" type="text/css" href="gord.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"> .Gord-Regular { font-family: Gord-Regular; } </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.
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.
Gord-Regular
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 Gord-Regular 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: Gord-Regular; }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: Gord-Regular; font-weight: normal; font-style: 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:
.Gord-Regular { font-family: Gord-Regular; } }Then, use the class as follows in the body section of your HTML:
<p class="Gord-Regular">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.
MyFonts | 500 Nickerson Road, Marlborough, MA, USA
MyFonts and MyFonts.com are registered service marks of Bitstream, Inc. Other technologies, font names, and brand names are used for information only and remain trademarks or registered trademarks of their respective companies.
© 2011 Bitstream, Inc
* MyFonts Webfont Build ID 887783, 2011-07-28T05:37:24-0400
* Webfont: Gord-Regular http://new.myfonts.com/fonts/typodermic/gord/regular/ * Foundry: Typodermic Start with a [blank page] or edit this document in the left window. * License: http://www.myfonts.com/viewlicense?1056 * Licensed pageviews: unlimited/month * CSS font-family: Gord-Regular * CSS font-weight: normal * CSS font-style: normal * (c) 2011 Bitstream Inc
Theme Name: Beardsley[[posterous-content:pid___0]][[posterous-content:pid___1]][[posterous-content:pid___2]][[posterous-content:pid___3]][[posterous-content:pid___4]][[posterous-content:pid___5]][[posterous-content:pid___6]][[posterous-content:pid___7]][[posterous-content:pid___8]][[posterous-content:pid___9]][[posterous-content:pid___10]][[posterous-content:pid___11]][[posterous-content:pid___12]][[posterous-content:pid___13]][[posterous-content:pid___14]][[posterous-content:pid___15]][[posterous-content:pid___16]][[posterous-content:pid___17]][[posterous-content:pid___18]][[posterous-content:pid___19]]
Description: A black and white art nouveau theme. Graphics are taken from the work of Aubrey Beardsley, the famous British illustrator associated with Oscar Wilde, among others. Try reloading the page to see a new border in the bottom corner of the page, from BeardsleyÕs illuminations for the 1893 Dent edition of MalloryÕs 'King Arthur'. Version: 1.1.3
Author: Sash Lewis
http://sashlewis.blogspot.com/ Tags: black, white, fixed-width, two-columns, right-sidebar
Download Parisian here: http://www.fontspace.com/george-williams/parisian Read the Open Font License here: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
Code to embed Parisian font for Internet Explorer and other browsers.
