Using Adobe Fonts on WordPress with Twenty Twenty-Three

I struggled with getting this working for a bit but found a relatively easy to enable Adobe Fonts on WordPress for the Twenty Twenty-Three theme.

Firstly, you need to create your Web Project on the Adobe Fonts site and add one or more fonts to it. Once you do so, you will need to link the Adobe CSS file to your WordPress site/theme and update the CSS rules to indicate which elements on your site should use Adobe fonts.

In order to link the Adobe CSS file, I looked at the source code of my WordPress site and found the following CSS file referred to in the code. So we are going to use it. Let’s edit it:

sudo nano /YOURPATH/wp-includes/blocks/navigation/style.min.css

On the very top line, add your Adobe CSS file link:

@import "https://use.typekit.net/YOURFILENAME.css";

Save your file.

Navigate to your WordPress site, click on Customize in the top admin menu, and add your CSS rules:

What I did, and this is work in progress, is to right-click on specific elements on the site, go to “Inspect” in the menu, and then find the CSS reference for the specific desired element, which I included in the Additional CSS box above with the font properties obtained from Adobe Fonts.

Once you have done this, refresh your site and you should see your fonts applied.

If useful to you, my additional CSS code looks as follows at the moment:

h2.wp-block-post-title {
	font-family: "sonar-sans", sans-serif;
font-weight: 600;
font-style: normal;
}
h1.wp-block-query-title {
	font-family: "sonar-sans", sans-serif;
font-weight: 600;
font-style: normal;
}
p.wp-block-post-excerpt__excerpt {
	font-family: "proxima-nova", sans-serif;
font-weight: 400;
font-style: normal;
}

h1.wp-block-post-title {
	font-family: "sonar-sans", sans-serif;
font-weight: 600;
font-style: normal;
}

h1.wp-block-site-title {
		font-family: "liza-display-new", sans-serif;
font-weight: 400;
font-style: normal;
}
p.wp-block-site-title {
	font-family: "liza-display-new", sans-serif;
font-weight: 400;
font-style: normal;
}

p.wp-block-site-tagline {
	font-family: "liza-text", sans-serif;
font-weight: 400;
font-style: normal;
}
div.wp-block-post-date {
	font-family: "sonar-sans", sans-serif;
font-weight: 300;
font-style: normal;
}
span.wp-block-navigation-item__label {
	font-family: "liza-text", sans-serif;
font-weight: 400;
font-style: normal;
}
div.wp-block-post-content {
	font-family: "proxima-nova", sans-serif;
font-weight: 400;
font-style: normal;
}

Update for WordPress 6.4.1 and Theme Twenty Twenty-Four

Following the release of WordPress 6.4, I replaced the previous theme with the new theme (Twenty Twenty-Four). I had to add the @import CSS link (above) in the file below:

sudo nano /YOURPATH/wp-includes/blocks/navigation/style.css

Keep in mind that the downside with this approach is that the file is rewritten each time WordPress is updated, so if there is a new update you apply manually or automatically, you need to re-add the CSS import line to the file above (or the style.min.css file). Just check in your source code which one of these two files is being used by your site.

Unfortunately, this cannot be added to the custom CSS rules in the interface given that the @import rule needs to be placed at the top of a CSS file.