Best way to incorporate web font 'kits' into the various RW font stacks

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:
 * Copyright: Copyright © 2019 Monotype Imaging Inc. All rights reserved.
 * Licensed pageviews: Unlimited
 * License:
 * © 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!

I think that my Font Pro stacks could be what you are looking for. You can supply your own web fonts and load them.

I agree, Joe. I actually purchased it for that purpose when it first came out. And I watched your video. Unless I missed it, the video didn’t specifically address how best to integrate these web kits into the stack. For example, in the Font Families stack, how do the font file names (in the above purchase of the HelveticaNow font, they download in the font web kit as ‘39270E_0_0.eot’, ‘39270E_0_0.ttf’, ‘39270E_0_0.woff’, ‘39270E_0_0.woff2’) appear as the display name of the font? Do we manually or automatically enter the font name into the Font Family > ‘Edit Label’ and ‘Family Name’ fields?

I could use some guidance there.

Hope that made sense. :slight_smile:


Watch the video on Web Fonts on the product page. You do not need to have any of that CSS. If loading your own font files, you can choose to name the font family whatever you want.

Ah, on the bottom of the page. Sorry, Joe, didn’t see those.

The Web Font video is easy to follow; I tried it and it worked. Nicely built, Mr. Workman.

One question: is there any way to set up the Font Family and Font Style stacks for site-wide application? (It looks like you need to place those stacks on every site page…no?) If not, then I suppose the next best thing is creating and using Partials?


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.