Sharing your Adobe font with us. What is a web project?

TABLE OF CONTENTS

• Steps to Create an Adobe Fonts Web Project:
  • Go to Adobe Fonts:
  • Open your web browser and go to fonts.adobe.com.
  • Browse and Select Fonts:
  • Use the search bar, filters, and browsing options to find the fonts you want to use on your website.
  • Add Fonts to Your Web Project:
  • On the font family page, you'll see a section that says "Add to Web Project."
  • Create a New Web Project (or Add to Existing):
  • In the panel, you'll have the option to "Create a new Web Project" or "Add to an existing Web Project."
  • Get the Embed Code:
  • Once you've created or updated your web project, Adobe Fonts will provide you with the embed code. It usually looks something like this (though the exact URL will vary):

If you have an Adobe subscription and have asked us to use an Adobe font on your website, the best and easiest way for us to use the font is to create a web project.

To create a web project to share Adobe Fonts, you'll use the Adobe Fonts service (formerly Typekit) directly from your Adobe Creative Cloud subscription. This process allows you to select fonts, create a "web project," and then generate code that you can embed into your website to display those fonts.

Here's a step-by-step guide:

An Adobe Fonts web project is a collection of fonts that you've selected from the Adobe Fonts library and configured to be served on a specific website (or multiple websites). When you create a web project, Adobe generates a small piece of code (JavaScript or CSS) that you embed into your website's HTML. This code tells the browser to load the specified fonts from Adobe's servers, making them available for use in your CSS.

Steps to Create an Adobe Fonts Web Project:

1. Go to Adobe Fonts:

   • Open your web browser and go to fonts.adobe.com.

   • Make sure you are logged in with your Adobe ID that has an active Creative Cloud subscription.

2. Browse and Select Fonts:

   • Use the search bar, filters, and browsing options to find the fonts you want to use on your website.

   • When you find a font family you like, click on it to view its details page.

3. Add Fonts to Your Web Project:

   • On the font family page, you'll see a section that says "Add to Web Project."

   • Click the [ ] icon (or a similar icon that indicates web use).

   • A panel will usually slide out from the right side of the screen.

4. Create a New Web Project (or Add to Existing):

   • In the panel, you'll have the option to "Create a new Web Project" or "Add to an existing Web Project."

   • If creating a new project:

     • Give your project a descriptive name (e.g., "MyClientWebsite 2025").

     • Crucially, add the domain(s) where the fonts will be used. This is a security measure. For development, you might add localhost, 127.0.0.1, or your specific development server URL. For a live site, you'd add yourwebsite.com. You can add multiple domains.

     • Select the specific weights and styles (e.g., Regular, Bold, Italic) you need for each font. Only include what you need to keep your website fast.

     • Click "Create."

   • If adding to an existing project:

     • Select the project from the dropdown list.

     • Choose the weights and styles.

     • Click "Save."

5. Get the Embed Code:

   • Once you've created or updated your web project, Adobe Fonts will provide you with the embed code. It usually looks something like this (though the exact URL will vary):

6. HTML

   <link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">
   

   • Sometimes, they also offer a JavaScript version. The CSS embed is generally preferred for performance.