Web Projects: Working With Web Fonts

Learn more about how to use web projects in Monotype Fonts.

Supriya Bisht avatar
Written by Supriya Bisht
Updated over a week ago

What is a web project?

Web projects are organizational tools for your library that provide access to the web font format of your fonts and allow you to group them together in one accessible place. They also provide sophisticated subsetting and font-hosting workflows, including usage monitoring and reporting features, for when you want to take your fonts live in your web applications.

Please note: Web projects created before August 2021 are using sunsetted technology and their functionality will be restricted. This article provides more help with legacy web projects.


How do I create a web project?

1. To create a web project, begin by clicking on the Create new button in the sidebar.

Create_new_web_project.png

2. Next, select Web project from the Create new dialog.

Select_web_project.png

Enter a name for your web project. While this is optional, it's recommended that you also add a comma-separated list of domains where you intend to deploy your fonts.

Naming_your_web_project.png

Finally, click the Create button.

Create_web_project.png

Your new web project will appear in the sidebar. Click on it to open it in the main view and start adding fonts to your new web project.

View_your_web_project.png

Adding (and removing) fonts in a web project

Just like with font lists, you can add fonts to your web projects from anywhere you encounter the Add to button throughout your font discovery and management journey—from the Browse section, search results, font and family pages, and more.

As an example, let’s add the Helvetica Now family to a web project.

1. Begin by clicking on the Add to button on Helvetica Now’s family page.

Adding Helvetica to web project_01

2. This will bring up the Add to dialog. Select the web project(s) to which you’d like to add your fonts. In this case, we’ll use the sample web project named “Web Project 01” that we created using the steps in the last section.

Add to web project_01

3. Click on the Done button to add the family to your web project.

Done button_03

4. Click on the My Library tab in the header to go to your library.

My library_02

5. Click on your web project in the sidebar to open it in the main view on the right.

6. The font family you added (in this case, Helvetica Now) will appear as follows:

Font family to web project_01

7. To limit the size of your web font package, only a select few styles of a font family (in this case, Helvetica Now) are added to your web project automatically. You can click the Expand icon to view all available weights and styles, and add the ones you want by clicking the + icon beside each option.

Expand web font_02

8. To remove a style or an entire family, hover over a font row and click on the X-shaped remove icon.

Remove family from web project_02

Sharing, revoking, and defining access level for a web project

Sharing web projects with members of your team is just as simple as sharing font lists.

Sharing and granting access to a web project

1. To share a web project, open a web project by clicking on it in the left sidebar.

Web project_01

2. Once the web project is open in the main view, click the Share access button to bring up the sharing dialog.

Share access button_02

3. In the sharing dialog, select teams and individuals to share the web project with by clicking the + button next to their names. You can also search for specific teams or individuals using the search bar in this dialog.

Share web project_01

4. Once you’ve added users to a web project, you can also define their access level by clicking on the access-level drop-down menu next to their name. This is set to View only by default, but can be changed to any of the following levels:

"Is owner"

Users with "Is owner" access can:

  • Add fonts to the shared web project.

  • Share the web project with other users, providing either “Can edit” or “View only” access.

  • Remove fonts from the shared web project.

  • Edit the Name and Description of the shared web project.

  • Duplicate the shared web project.

  • Delete the shared web project.

  • Subset web fonts.

  • Generate embed code(s) for web fonts.

  • Download the web fonts self-hosting kit.

"Can edit"

Users with "Can edit" access can:

  • Add fonts to the shared web project.

  • Share the web project with other users, providing either “Can edit” or “View only” access.

  • Remove fonts from the shared web project.

  • Duplicate the shared web project.

  • Subset web fonts.

  • Generate embed code(s) for web fonts.

  • Download the web fonts self-hosting kit.

"View only"

Users with “View only” access level can only view the web project shared with them. However, depending on the specific permissions for their role, these users may be able to generate web font embed codes and download the web font self-hosting kit.

5. You can also choose to notify the users with whom you’ve shared your web project via email using the Notify shared users by email option toggle-switch.

Notify users by email_02

6. You may also choose to share a web project with your entire company in one go by clicking the Share with entire company toggle-switch.

share with company toggle_02

7. Once you’re ready, click the Update button to put your changes into effect.

Update button_02

How do I use the web project's tracking and monitoring features?

Web font usage is reported as the number of page views for web projects and impressions for digital ads.

As a Company Admin, you can easily monitor font usage by clicking on the Reports button below the name of a web project/digital ad in the main view, as shown below:

Web_projects_reports.png

Keep in mind that the number of page views/impressions is based on the page views for an entire web project or digital ad.

For example, if your web project contains 10 fonts and is used on a webpage that receives only one page-view, your report will show one page view, not 10.

In case of overages, Monotype will not turn off its hosted service or send an invoice for overages. However, we may reach out to you if your consumption greatly exceeds the allowance.


Revoking access to a web project

1. To revoke a user’s access to a shared web project, open the sharing dialog, search for the user or team, and hover over the checkmark icon next to their name.

Revoke access_03

2. This will toggle the checkmark icon to an X-shaped Remove Access button. Click on it to revoke access.

Revoke access_04

Did this answer your question?