MyFontsWebfontsKit

Formular-Light
Formular-Bold
Formular

How To:

The MyFonts Webfonts Kit is a collection of code and font files which allow all modern browsers to use webfonts in a standardized way. All you need to do is copy and paste some sample code, and make some edits to your CSS. Three simple steps then you're on your way.

1. Upload your Kit

Upload the contents of the Kit to your server. This is typically done using some type of FTP program — the same way that you upload images and other files to your website. Typically it is easiest if you upload all the files and folders to the root folder of your site. You can alternately create a subfolder (or use an existing one) and put the Kit there, put them wherever you want. Be sure to make note of the location you'll need it in step two.

Note: You do not need to upload the StartHere.html file or the Start_here_files folder.

2. Edit your site

Include a reference to the Kit. Locate the MyFontsWebfontsKit.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 link 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 and paste the code below into your site's head. If you uploaded the Kit to a subfolder, you’ll need to adjust the path to the font files in the MyFontsWebfontsKit.css file.

<!--
/**
* @license
* MyFonts Webfont Build ID 401565
* 
* 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 from one of MyFonts official sites.
* http://www.fonts.com
* http://www.myfonts.com
* http://www.linotype.com
*
*/
-->
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">

3. Edit your CSS

Now for the fun part! You'll need to assign the webfonts (font-family) to tags, classes and other CSS selectors. You need to decide where on your site you would like to use the webfonts. Using CSS, you can assign webfonts to specific areas of your site. There are several ways to do it, here are the basics and we’ll explore more advanced options in the 'Sample code' section below.

A simple method is to make a new class selector and then assign the family names of the webfonts. Wherever you want to use Formular-Light just assign the class in your HTML. Here’s how it is done:

.Formular-Light {
	font-family: Formular-Light;
}.Formular-Bold {
	font-family: Formular-Bold;
}.Formular {
	font-family: Formular;
}

Sample CSS

Lets look at some fancy ways you can use CSS & CSS selectors to apply webfonts to your site!

If you'd like to assign a font to the entire site, simply use the body tag selector in your stylesheet.

body { font-family: Formular-Light; }

If you’d like all headings to be formatted using this webfont, you need to assign it to the h1…h5 elements. Remember to assign the weight and style of the font, especially if you don't have the entire family. Use the following CSS declaration in the stylesheet for your website:

h1, h2, h3, h4, h5 { 
	font-family: Formular-Light;
}

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 stylesheet for your website:

.Formular-Light {
	font-family: Formular-Light;
}

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

<p class="Formular-Light">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. There are tons of different things you can do with CSS, so have some fun!

Webfont Kit Troubleshooting

So it's not working, bummer. Here are some tricks and tips to make this process a little easier.

Webfonts not working at all?

This is usually a problem with the path to either your CSS file or the actual font files referenced by the CSS file. Double check all your paths and make sure that you're pointing to the locations which you uploaded the kit to. It also might be worth double checking your CSS inside of a debugging tool such as Firebug (for Firefox) or Chrome Developer tools.

Webfonts not working on an iPhone or other iDevice?

This happens frequently when using IIS as a webserver. IIS will not serve file types (MIME types) it is unfamilar with, so you must set the MIME type for SVG to "image/svg+xml" in the server settings.

Webfonts not working in Firefox or IE9+?

Newer versions of Firefox and Internet Explorer have cross domain restrictions on font loading. This is a security feature which can get really frustrating if you're not aware of it. The best thing to do is to host the font on the same domain, however if you have to host it on a different subdomain or on a CDN service you can get around this issue by adding a custom header, something like 'Access-Control-Allow-Origin: *' this article explains it in detail.

The WOFF file isn't loading

This happens frequently when using IIS as a webserver also, IIS will not serve file types (MIME types) it is unfamilar with, so you must set the MIME type for WOFF to "application/font-woff" in the server settings.

Formular-Light

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.

Formular-Bold

Formular