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;
}

The post Using Adobe Fonts on WordPress with Twenty Twenty-Three appeared first on Ars.md.