Webtype Tutorial

Guide to using Webtype

There are three steps to implementing your web fonts:

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

Tip: 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).

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.
  • Tip: CSS can be internal, external, and inline. Update the font-family based on the kind of CSS you are using. 
Below is an example of the finished project using the Rockwell font family:

Webtype example - ConceptFeedback.com

Return to top