What are Adobe Font Kits?
Adobe Type Kits, available through Adobe Fonts, are curated collections of fonts that can be seamlessly integrated into your website or design projects. These kits provide access to a wide range of high-quality, professionally designed typefaces, enabling you to enhance your site’s typography with premium fonts.
How it Works
Adobe Type Kits operate through Adobe Fonts, a service that offers thousands of fonts for use across web and print projects. To use an Adobe Type Kit, you first need an Adobe account. Once signed in, you can browse and select fonts from the Adobe Fonts library, organizing them into kits based on your project’s needs.
After selecting the fonts, you can generate a web font embed code directly from Adobe Fonts. This code is then added to your website’s code via Refoundry settings, allowing the selected fonts to be used across your site. Adobe’s service hosts the font files, ensuring they load quickly and reliably. You can apply these fonts to various design elements like headings, body text, and buttons, ensuring consistent typography across your website. Additionally, Adobe Fonts integrates with many design tools, allowing for a streamlined workflow between design and development.
The service also ensures cross-browser compatibility and supports various font weights and styles, making it a flexible and powerful tool for web typography.
Adobe Font Kit Settings
New content
Add an Adobe Font Kit
When integrating an Adobe Font Kit into Refoundry, there are three key fields you need to configure: Adobe Fonts API Key, Project ID, and Fetch. These fields ensure that your chosen Adobe fonts are correctly connected to your website and are available for use in your typography settings.
Adobe Fonts API Key is a unique identifier that links your Adobe Fonts account with Refoundry. To find your API key, log in to your Adobe Fonts account and navigate to the “Web Projects” or “Webkits” section in your settings. Here, you’ll find the API key associated with your account. Copy this key and paste it into the Adobe Fonts API Key field in Refoundry. This key is crucial for authenticating your access and enabling the font fetching process.
Project ID is a unique identifier assigned to each web project or “webkit” you create in Adobe Fonts. After selecting and organizing your fonts within Adobe Fonts, you’ll be given a Project ID for your webkit. This ID is used to specify which font kit Refoundry should pull from Adobe’s servers. You can find the Project ID within the details of your webkit on the Adobe Fonts website. Simply copy this ID and input it into the Project ID field in Refoundry.
The Fetch button in Refoundry allows you to retrieve the fonts associated with your Adobe Font Kit. Once you’ve entered the Adobe Fonts API Key and Project ID, click Fetch to pull the fonts into Refoundry. This process only needs to be done once. After fetching, any future changes you make to your Adobe Font Kit on the Adobe website will automatically be reflected in Refoundry, ensuring that your fonts are always up-to-date without needing to repeat the fetch process.
To get started, visit your Adobe Fonts Web Projects to create or manage your font kits. Once your fonts are selected and your webkit is set up, use the provided API key and Project ID to link your Adobe Font Kit with Refoundry, enabling seamless integration of high-quality fonts into your website’s design.
These font families must be set up in this section to make them available as selectable options in your site’s type and button styles. Without configuring the fonts here, they won’t appear in the dropdown menus when you’re customizing typography settings in Refoundry. Proper setup ensures that your chosen fonts are easily accessible and consistently applied across different design elements, maintaining a cohesive look throughout your site.
More about
Typography
