I have purchased and successfully used a few different font stacks to enable web fonts on my project sites. The font vendors I use—MyFonts and Adobe Typekit—provide the option to download the fonts as ‘kits’; but the font names in those kits are designed for use with a provided CSS (of which I have very little functional knowledge) and, so, are not easily discernible. For that reason, I have always gone through a tedious process of renaming each of the font file names before uploading them to my sites so I can easily reference them in the stacks I use.
Below are the instructions that came with the webfont kit for one of the fonts I purchased.
Is there way to use these web font kits as-is, along with stacks such as Font Pro, or Paragraph/Header Pro?
Thanks, friends.
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 3745550, 2019-04-10T12:46:36-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: HelveticaNowDisplay-Blk by Monotype
* URL: https://www.myfonts.com/fonts/mti/helvetica-now/display-black/
* Copyright: Copyright © 2019 Monotype Imaging Inc. All rights reserved.
* Licensed pageviews: Unlimited
*
*
* License: https://www.myfonts.com/viewlicense?type=web&buildid=3745550
*
* © 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 HelveticaNowDisplay-Blk just assign the class in your HTML. Here’s how it is done:
.HelveticaNowDisplay-Blk {
font-family: HelveticaNowDisplay-Blk;
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: HelveticaNowDisplay-Blk; }
If you’d like all headings to be formatted using this webfont, you need to assign it to the h1…h5elements. 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: HelveticaNowDisplay-Blk;
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:
.HelveticaNowDisplay-Blk {
font-family: HelveticaNowDisplay-Blk;
font-weight: normal;
font-style: normal;
}
Then, use the class as follows in the body section of your HTML:
<p class="HelveticaNowDisplay-Blk">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!
