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, sign in and 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) and font language subsetting options
  5. Click Save

Webtype tutorial - create a new project

If your site has a very small character set range, the Custom Text option can be used to apply a specific text string. Only those glyphs would then be saved in the font, providing a further file size reduction (and faster font download time).


2. Update Your Website

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

  • Resource Link: 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. 

Return to top