How to Enable Adobe Fonts (Typekit) in GeneratePress Theme

Adobe Fonts still works in the GeneratePress theme, but the tutorial you followed a few years ago probably does not. GeneratePress 3.1 replaced the old typography system, and the PHP filter most guides still hand you is now the legacy path. Two things have to happen: Adobe’s stylesheet has to reach the page, and GeneratePress has to know the family exists. Here is the current route for both, plus the licensing and layout-shift costs nobody mentions.

What you actually need

GeneratePress 3.1 or newer, an Adobe Fonts web project, and somewhere to put a stylesheet link in wp_head. That last item is the only part that involves a decision. The theme’s WordPress.org listing puts the current release at 3.6.1 with over 500,000 active installs, so unless you have deliberately frozen updates, you are already past 3.1.

Route	What it needs	Cost	Renewal
Hook Element	GP Premium	$59/year	Auto-renews yearly
Snippet plugin	Code Snippets or similar	Free	None
Child theme	A child theme and FTP access	Free	None

GP Premium is the only route in that table that costs anything. At $59 per year it is worth having for other reasons, but do not buy it purely to paste one line of HTML.

Step 1: Build the web project and copy the CSS embed

On the Adobe Fonts site, open your font, add it to a new or existing web project, and pick the weights and styles you will genuinely use. Every extra weight is another file the browser downloads.

Adobe then offers you three embed codes: a default <link> tag, a CSS @import, and a JavaScript version. Take the <link>. The JavaScript embed exists mainly for dynamic subsetting of East Asian typefaces, and @import buries the request one level deeper in the CSS chain, which delays it.

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

While you are on that screen, open the CSS panel and write down the exact font-family string Adobe gives you. It is usually lowercase and hyphenated, like proxima-nova, and it is often not what the font is called on the marketing page. Get this wrong and every other step still works while nothing changes on screen.

Step 2: Get that tag into wp_head

With GP Premium

Go to Appearance > Elements > Add New and choose Hook as the element type. Paste the link tag in the content box, set the hook to wp_head, then under Display Rules set Location to Entire Site. Publish. The Elements module is part of GP Premium, not the free theme, which is the whole reason the free route below exists.

With a snippet plugin or child theme

Any code snippet plugin will do this, and so will your child theme’s functions.php. Code Snippets is free, sits on over a million sites, and keeps the code out of the theme where a bad edit cannot white-screen you.

add_action( 'wp_head', 'smw_adobe_fonts_embed', 5 );
function smw_adobe_fonts_embed() {
	echo '<link rel="preconnect" href="https://use.typekit.net" crossorigin>';
	echo '<link rel="stylesheet" href="https://use.typekit.net/abc1def.css">';
}

The preconnect line is not decoration. Google’s font best practices recommend a preconnect hint whenever fonts come from a third-party origin, because it opens the TCP and TLS connection before the browser has finished parsing your CSS. It is a cheap win and it costs one line.

Step 3: Register the font in the Font Manager

This is the part that changed. Since GeneratePress 3.1, dynamic typography ships in the free theme and you register fonts through a UI instead of a filter.

1. Open Customize > Typography.
2. In the Font Manager, click Add Font.
3. Type the exact family string from step 1 into the font family field. Leave the Google Font toggle off. That toggle tells GeneratePress to go and fetch the font from Google, which is not where yours lives.
4. Scroll to the Typography section, add or edit an element such as Body or Headings, and pick your font from the Font Family dropdown.
5. Publish.

No Font Manager on the screen? Then dynamic typography is switched off. It is disabled by default on sites that existed before 3.1, so the theme does not rearrange typography you already set. The toggle lives in Customize > General. Turn it on and GeneratePress will attempt to migrate your existing settings, so take a backup first and check your headings afterwards.

Step 4: Verify it actually loaded

Do not trust the Customizer preview. It renders in an iframe with the admin’s caching behavior and will happily show you a font your visitors never receive.

1. Purge every cache layer: your cache plugin, your host’s object and page cache, and any CDN in front of it.
2. Load the live page in a private window, open DevTools > Network, and filter for typekit. You should see the CSS file and then the font files themselves.
3. Right-click your body text, Inspect, and open the Computed tab. Scroll to the bottom: Chrome lists the rendered font there by name. If it says your fallback rather than the Adobe family, the CSS arrived but the family string does not match.

The legacy filter, and why yours is broken

If you are still on the old typography system, GeneratePress exposes a generate_typography_default_fonts filter that pushes a family into the Customizer dropdown. Plenty of copies of this snippet floating around the web have a mangled empty-bracket line that fatals on newer PHP. The working version is unremarkable:

add_filter( 'generate_typography_default_fonts', 'smw_add_typekit_font' );
function smw_add_typekit_font( $fonts ) {
	$fonts[] = 'proxima-nova';
	return $fonts;
}

Use it only if the Font Manager genuinely is not there. On a dynamic typography site the filter buys you nothing, and carrying dead code forward is how sites end up with a functions file nobody dares touch.

What breaks

• The family name is wrong. Marketing name, not CSS name. Check Adobe’s CSS panel again.
• The Google Font toggle was left on. GeneratePress then requests a font that does not exist at Google and you get a fallback.
• Cache. Both yours and the CDN’s. Test in a private window before you start debugging anything else.
• CSS optimization ate the tag. Remove Unused CSS and combine-CSS options in WP Rocket or similar tools are worth switching off while you test, then re-enabling one at a time.
• GP Premium was deactivated. The Hook Element stops firing and the stylesheet vanishes with it. A snippet plugin does not have this failure mode.
• The subscription lapsed. Covered below, because it deserves its own paragraph.

font-display, and what web fonts cost you in CLS

Adobe does not accept a URL parameter for this. Google Fonts lets you append &display=swap; Adobe makes it a project setting. Open your web project, click Edit Project, choose a font-display value in the sidebar and save. New projects default to auto. The change flows through the embed code you already installed, so there is nothing to edit on the site.

Which value to pick is a genuine trade-off, and Google is blunt about it: auto, block, swap and fallback can all cause a layout shift when the font swaps in. Cumulative Layout Shift is scored good at 0.1 or below at the 75th percentile of page loads, and a fallback font that renders wider or narrower than the real one is listed there as a cause. swap shows text soonest and shifts it later; optional gives the font one short window and otherwise sticks with the fallback for that visit, which protects CLS at the cost of visitors sometimes not seeing your typeface at all.

Pick a fallback stack whose metrics are close to the Adobe font and the swap becomes much less violent. And keep this in proportion. Before you spend an afternoon on font metrics, check the other things that move a layout: images without width and height attributes, lazy loading applied above the fold, and banners injected late. The wider fixes live in our guides to speeding up a WordPress site and reducing server response time.

The catch nobody mentions

Three things that matter more than any of the setup above, and that most tutorials on this topic leave out entirely.

You cannot self-host Adobe Fonts. The web font licensing terms require the files to be served from Adobe’s network through the embed code. Downloading the WOFF2 files and dropping them on your own server is not a clever optimization; it is outside the license. If you want the files on your own domain, buy a self-hosting license for that typeface from the foundry.

The fonts stop when the subscription stops. Adobe states in the same document that canceling Creative Cloud makes the web fonts unavailable to your sites, at which point every page drops to the next font in the stack. On a client site that is a design regression triggered by a billing event you do not control. Put the renewal in the handover document, in writing.

Your localization plugin will not save you. Perfmatters has a one-click local Google Fonts feature, and people assume it covers Adobe too. It does not, and no compliant plugin can, for the licensing reason above. Every visitor still connects to Adobe’s servers.

Self-hosting: the faster alternative

If the third-party connection bothers you, and on a performance-sensitive site it should, the answer is a different font rather than a different delivery method. Either license the typeface for self-hosting from the foundry, or pick an open-licensed family you are allowed to ship yourself.

The workflow is short. Upload the WOFF2 files somewhere sane such as /wp-content/uploads/fonts/ using SFTP or a file manager plugin, declare them, and then register the family name in the Font Manager exactly as in step 3.

@font-face {
	font-family: 'Your Font';
	src: url('/wp-content/uploads/fonts/yourfont.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

Two connections become one, you control font-display directly in the declaration, and no billing lapse can take your typeface away. Worth noting that block themes get WordPress’s built-in Font Library for this. GeneratePress is a classic theme, so you do the @font-face by hand, which is a fair trade for the control it gives you over everything else. If you are still choosing, our roundup of SEO-friendly WordPress themes covers the alternatives.

Which route to pick

• Your own site, GP Premium already installed: Hook Element plus Font Manager. Ten minutes.
• Free theme only: snippet plugin plus Font Manager. Same ten minutes, no license.
• Client site, brand typeface, long life expectancy: buy the self-hosting license. It removes the renewal dependency completely.
• You just want something that looks good and loads fast: skip Adobe, self-host an open font, move on.

Frequently Asked Questions

Our verdict

Use the CSS link embed, load it through a snippet plugin rather than GP Premium so the font survives a license lapse, register the family in the Font Manager, and set font-display inside the Adobe project. That is the whole job and it takes about ten minutes.

But be honest about why you are doing it. Adobe Fonts earns its place when a specific typeface is part of the brand and nothing else will do. If you are picking a font because it looked nice in a browse session, self-host an open equivalent instead. You get one fewer third-party connection, direct control over font-display, and no renewal date that can quietly change how the site looks.