Integrating Adobe Typekit Fonts into Drupal Projects
Adobe Typekit is a fantastic resource for enhancing the typography design of your website. In this guide, you will learn step by step how to integrate Adobe Typekit fonts into a Drupal-based website through an HTML Twig file.
Adobe Typekit Embed Code
The default embed code for your Typekit project is a single <link> tag that loads the CSS of the web project using the font network in the browser (use.typekit.net).
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
To find the default embed code for your project, you can visit the Web Projects page. By adding this embed code to the <head> tag of your website, you can load the fonts.
Step 1: Create Your Adobe Typekit Account and Add a Project
1.1. Create an Adobe Typekit account or log in with an existing account.
1.2. After logging in, go to the "Web Projects" page and create a new project.
1.3. Find the default embed code on the detail page of the project you created.
Step 2: Edit the HTML Twig File of Your Drupal Theme
2.1. Log in to the Drupal admin panel and go to the "Theme Configuration" section.
2.2. Locate the location of your theme (usually themes/custom/[theme_name]).
2.3. Open the html.html.twig file in the Global templates folder.
2.4. Add the following code inside the <head> tag:
<head>
<head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
2.5. Replace the part "https://use.typekit.net/xxxxxxx.css" with the embed code obtained from your Adobe Typekit account.
Step 3: Clear and Check the Drupal Cache
3.1. Go to the "Performance" section in the Drupal admin panel and clear the cache.
3.2. Visit your website and ensure that Adobe Typekit fonts are loaded correctly.
Now, you can enhance your Drupal website design using Adobe Typekit fonts.
