Setup Tutorial

Guide to using Webtype

There are two steps to implementing your webfonts:

1. Create a New Project

  1. After purchasing a Webtype license, click Your Account
  2. Click Add New Project
  3. Enter the Project Name, your website URL and a testing URL (if applicable)
  4. Select the font(s)
  5. Click Save

Webtype tutorial - create a new project

Once you’ve created a project and selected fonts you can move directly to coding your website or you can select options to customize your fonts. See additional options for customizing your fonts.


2. Update Your Website

Once you save your project, we give you everything you need to implement the fonts on your website.

  • Resource Code: Add this line of code to your web pages before the </head> tag.
  • CSS Sample: We provide you with the fonts organized by class name. You can choose to rename the class name if desired, or you can simply use the font-family, font-style and font-weight properties.

Webtype tutorial - save project settings

  • Tip: To implement webfonts on a website using a template, add the Resource Link above the </head> tag in the template.
  • The CSS can be internal, external, and inline. Update the font-family based on the kind of CSS you are using. 


Additional options

By default, your fonts will contain all available glyphs. Expand the arrow next to the font name to view sub-setting options. You can subset based on the language support you need or you can input a specific text string. Subsetting reduces file size and thus decreases font download time. After making changes, click Save.

Customizing font-family and font-weight names
Advanced users can customize their CSS by adjusting their font family and font-weight names. After making changes, click Update.

Viewing sample code
To see sample code and a preview of how your fonts will render at different sizes, click on View Demo. You can also learn about using WebFont loader to load your fonts.

Adding additional fonts to an existing project
If you decide you would like to add additional fonts to your project, click Add Font to this CSS resource. You can then add any fonts licensed to your account.

Adding Additional CSS Resources
At the bottom of the page is an option to Add another CSS Resource. You might want to consider this if you have several fonts in your project and they are used on different pages. By just loading the fonts you need on each page, you will decrease page load time.

Webtype tutorial - font subsetting

Return to top