MyFontsWebfontsKit

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 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 CSS file.

<!--
/**
 * @license
 * MyFonts Webfont Build ID 3810674, 2019-09-23T17:31:28-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: Calligraphic421TL-RomanB by Tilde
 * URL: https://www.myfonts.com/fonts/tilde/calligraph-421/regular/
 * Copyright: Copyright 1990-2007 Bitstream Inc. All rights reserved. Modification for
 * European languages. Copyright 1995-2007 Tilde, SIA.
 * Licensed pageviews: 10,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3810674
 * 
 * © 2019 MyFonts Inc
*/

-->
<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. Whereever you want to use Calligraphic421TL-RomanB just assign the class in your HTML. Here’s how it is done:

.Calligraphic421TL-RomanB { 
	font-family: Calligraphic421TL-RomanB;
	font-weight: normal;
	font-style: normal;
}

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: Calligraphic421TL-RomanB; }

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

.Calligraphic421TL-RomanB { 
	font-family: Calligraphic421TL-RomanB;
	font-weight: normal;
	font-style: normal;
}

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

<p class="Calligraphic421TL-RomanB">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. Your other option is to rebuild your webfont kit with Data URI encoded TTF's, it's an option under the Advanced section in our kit builder.

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.