Adding Adobe Fonts (formerly TypeKit)

If you’re about to start using a font from the huge list of Adobe Fonts, then head to the article below or the video above, you will find detailed instructions:

  1. Go to Laborator > Typography
  2. Click the Add Font button to add a new font.
  3. From the font source area select Adobe Fonts (formerly TypeKit) and click the Continue button on the right.
  4. Go to Adobe Fonts website and login with your account.
  5. Search the font you want to use (for this example we will search for “Old Standard” font).
  6. Click the Add to Web Project that looks like this sign: </>
  7. Add a name in the “Enter a new project name” area and click Create button.
  8. Click Edit Project button, this will send you to My Adobe Fonts Web Projects area.
  9. Copy Project ID number and Font Family Name.
  10. Get back to your site and paste the Project ID and Font Family Name in the required fields.
  11. Click the Generate Preview button to see if the font is being loaded successfully.
  12. In the Live Preview window will appear, on the top left in the Selectors add body, p and h1, h2, h3, h4, h5 if you want the font to show on your whole site, or any other selector specific for a button, menu or wherever you want to use.
  13. Click Save Changes, and check your site to see it live.

Was this article helpful?