How do I add my Adobe Fonts to my site builder Typography dropdown box?
-
Hello everyone! I’m new to HTML coding and am trying to hook up my new WordPress.com website to my Adobe Fonts (formerly known as Typekit) subscription. According to the WordPress Developer Resources (Citation: https://developer.wordpress.org/themes/global-settings-and-styles/settings/typography/#custom-font-families) I should be able to add these fonts to my site’s block theme Appearance Editor dropdown box for Typography. It’s trickier than I expected. Custom CSS via the Appearance Editor (even for block themes under the Business plan) DOES change things, just not how it’s supposed to. Here’s what I have, what I know, and what else I think I need to know to make it happen. Any ideas?
What I Have:
- WordPress.com Business plan and subscription
- WPCode – Insert Headers and Footers plugin, free version
- Active Adobe Fonts service subscription
- A <link> tag provided by Adobe to put into my sitewide <head>, which calls the fonts
- The font-family, font-weight, and font-style for the Adobe-provided fonts
- A block theme website (not yet launched, still in development) I edit through WordPress.com > Appearance > Editor
What I Know:
- Putting Adobe’s into my code unlocks the fonts there for use in my site, if the site code calls the fonts properly.
- The WPCode plugin is really easy to use to put this <link> into the <head>. I just go to WP Admin > Code Snippets > Header & Footer > Header, and copy and paste.
- By editing the settings.typography.fontFamilies property in theme.json, I can add custom fonts (including external web fonts, like the ones I get access to through the Adobe Fonts <link>
- Editing theme.json directly is dangerous for new coders like me.
- Edits to theme.json will get reset (wasting my time) each time my theme gets updated.
- Using a child theme based on my current theme means my theme.json edits won’t get replaced because the theme won’t get updated.
- Using a child theme means my theme won’t get updates, which is bad.
- Making a child theme is about as dangerous for new coders like me as editing theme.json directly is.
- WPCode’s description says “Our simple insert headers and footers interface allows you to insert code like Google Analytics, custom CSS, Facebook Pixel, and more to your WordPress site’s header and footer as well other areas of your website. No need to edit your theme files!”
- My code needs to have these properties: name, slug, fontFamily, and fontFace.
- My fontFace property needs to have these subproperties: fontFamily (a repeat), fontWeight, fontStyle, fontStretch, and src.
What I Need to Know:
- What buttons do I press in the free WPCode plugin to inject the right code (whatever that is) into this specific part of this specific file: theme.json > settings > typography > fontFamilies
- When I write the code for my new Code Snippet, where do I need to place [square brackets], {curly braces}, “double quotes”, and ‘single quotes’?
- When I write the code for my new Code Snippet, where do I need to use the hyphenated versions of terms provided by Adobe (like font-family) versus the camel case versions provided by WordPress (like fontFamily)?
- Which of the fontFace subproperties are required? Which are optional?
For the purposes of examples, assume here’s the information Adobe’s given me for the <link> tag and the fonts in question (this is simplified for silly little smooth brain users like me):
<link rel=”stylesheet” href=”www.url.css”>
font-family: fonty-mcfontface, sans-serif;
font-weight: 500;
font-style: normal;
The blog I need help with is: (visible only to logged in users)
-
Hi there @bezirkdesign,
Thanks for sharing all the details, it’s clear you’ve done a lot of thoughtful work on this.You’re right that adding Adobe Fonts (Typekit) to a WordPress.com Business site involves two main steps: loading the font into your site and then applying it where you want it to display. What’s possible on WordPress.com:
You can use your Adobe Fonts by:
- Adding the
<link>tag from Adobe into your site’s<head>using the WPCode plugin – sounds like you’ve already got this part done, which is great. - Applying the font to your site using custom CSS under Appearance → Customize → Additional CSS. For example:
cssCopyEditbody { font-family: "fonty-mcfontface", sans-serif; }
At the moment, WordPress.com doesn’t allow editing of
theme.jsonfiles or registering custom fonts for use in the Typography dropdown within the block editor. That type of customization is available on self-hosted WordPress.org sites where you have full access to theme files.So while you won’t be able to add Adobe Fonts to the theme’s typography panel, you can still apply them through CSS across your site.
One note: While you can use custom CSS freely, WordPress.com Support doesn’t provide assistance with writing or troubleshooting custom CSS. If you run into issues with specific styles, you may want to explore tutorials or ask the community for CSS-specific help.
Here there are other guides that you might find helpful:
Let me know if that helps.
- Adding the
-
Wow, fast response! Thank you!
I know that you’re WordPress Staff a lot more than I am, but are you sure we can’t edit theme.json, even with the help of plugins like WPCode? On the left side of my WPAdmin (I think that’s what it’s called) I can go to Tools > Theme File Editor > theme.json.
Like, it’s right there. Under “Theme File Editor”. It’s even called “theme”.
It’s in the name. Twice.
-
And you are absolutely right :) Normally you would be able to but the difference here is that themes made by “Automattic” at WordPress.com are actually symlinked.
In other words, we have a master file that we update and maintain, which is then used by all sites that use that theme. This allows us to ensure it’s always in the best state it can be, and we can share improvements instantly.
But it also means that you can’t just change that theme or its components in the way the core WordPress would, as you can’t change those master files yourself.
So what can you do?
You could make a child theme (https://wordpress.com/support/themes/child-themes/). This would create a copy of the current version of the theme. It wouldn’t update automatically anymore, but it would give you full control over its settings then.I hope that helps to clarify what’s going on.
-
Okay yes, I think that makes sense. I already knew that because it’s an official theme (albeit from Automattic, not WP itself) the main theme.json file will get updated automatically. BUT it sounds like for the “official” and “updated automatically” perks to work, it needs to be that the site admins like myself can’t edit theme.json, even by way of handy-dandy plugins like WPCode. If I were to somehow edit theme.json anyways, that would interrupt the ability for you guys to update it automatically. Which is kind of the whole point here – I want to keep up the automatic updates.
I imagine that if I made a child theme and used WPCode to inject something correct into that theme (as opposed to coding it in by hand myself, which as I said is just outside of my technical comfort zone enough to be dangerous) so I could accomplish my “Adobe Font to Typography Dropdown Box” goal, it might actually work. And other than the code snippet my child theme would remain identical to the normal one. Whenever the main theme is updated, I could just manually recreate a new child theme and quickly inject the same old WPCode snippet in. Of course, that means I miss out on nice things like emergency hotfixes, and if updates happen every couple of days or weeks it might get tedious (one person company right here). But if updates happen irregularly and infrequently, I might miss important ones.
So yes, that clarifies things, even though it’s not the news I hoped for.
HOWEVER. I have great news. Remember how I said in my initial post “Custom CSS via the Appearance Editor (even for block themes under the Business plan) DOES change things, just not how it’s supposed to”? Well I was lucky enough to catch the eye of some very qualified folks who happened to have a spare few minutes and were impressed I’d worked so hard to get this figured out. We found a solution. I’ll make another comment with basically what worked for us.
-
Solution: I can’t add my web fonts provided by Adobe Fonts (formerly known as Typekit) to my site’s Typography dropdown box without creating a child theme or sacrificing WordPress-provided automatic theme updates, even by using a plugin like WPCode. But I CAN still add the fonts in other ways.
I was given a <link> tag by Adobe to put in my site’s <head> tag.
<link rel="stylesheet" href="www.url.typekit.css">I put that into my <head> tag by getting a Business plan, the free WPCode plugin, also known as WPCode Lite and Insert Headers & Footers + Full WordPress Code Snippets Plugin. Then within my WPAdmin, I looked at the lefthand navigation bar and went down near the bottom to Code Snippets > Header and Footer. Note that I did NOT go to Code Snippets > Code Snippets, or to Code Snippets > + Add Snippet. Those weren’t what I needed.
At Code Snippets > Header and Footer, I found the Header text box at the top of the page and pasted in my Adobe <link>, then clicked Save Changes.
Then I went to Appearance > Editor to start adding the font in to the right places.
Within that, I go to Styles > Additional CSS. Additional CSS shows up at the bottom of the Styles panel IF IT IS THERE AT ALL, beneath Blocks.
If it is NOT there, then I had to go find it through a sort of metaphorical backdoor entrance first, then it started showing up there. I clicked on the main content of my website so the left two panels (above) would minimize, then I went and found that same Styles symbol on the top right corner.
Then press the three dots menu in the top corner of the newly opened styles panel (NOT the three dots next to the Save button), and there it was.
Okay now that I’ve found the right spot, I can incorporate the other code Adobe gave me. Here’s my Adobe-provided example code for the specific fonts I want to use.
font-family: fonty-mcfontface, sans-serif; font-weight: 500; font-style: normal;I knew I wanted to use Fonty McFontface (which I now realize might sound better as Typey McTypeface) for major headings, so h1, h2, and h3. So I added in this code to overwrite any conflicting instructions, or at least the default ones.
h1, h2, h3 { font-family: "fonty-mcfontface", sans-serif !important; font-weight: 500 !important; font-style: normal !important; }There’s two VERY important differences here. 1.) I put the font family name in double quotations, but not the comma and not any other text from that line. It’s “fonty-mcfontface” and not “fonty-mcfontface,” or “fonty-mcfontface, sans-serif”. 2.) I added in the marker !important at the end of each line, just before the semicolon. Apparently this is supposed to help with that override process.
But I also knew I would probably want to use it other times too outside of just headings, so I made a custom CSS class that I named bzhn (short for Bezirk Heading).
.bzhn { font-family: "fonty-mcfontface", sans-serif !important; font-weight: 500 !important; font-style: normal !important; }Note that I added a period before bzhn. This is an important part of creating CSS classes, I think. The content within the curly braces remains the same though, including the quotation marks and !important.
To add this in on a block-by-block basis, I first click on the block I want to add it to. Then I go to the righthand navigation bar again (instead of the left) and instead of clicking Styles in the top right, I click Settings > Block > Advanced. Then I type in my class with NO period in the Additional CSS Class(es) box.
And here’s the final important bits.
1.) These changes won’t take effect unless I press the Save button.
2.) The font will NOT be displayed properly in the site’s Editor mode. It SHOULD however display properly on the actual site, like when clicking Preview or (I think) Launch.
Here’s a heading as it shows up in my Editor. It uses some simple basic fallback font.
Here’s the same heading as it shows up on my actual site. It uses the font I actually wanted.
There we go, all done. And in the end my website lived happily ever after.
I think I can also add it to blocks I don’t know the HTML tags for, like Site Title. I went to Styles > Blocks > Site Title > Advanced. Then I wrote this in the Additional CSS box.
font-family: "fonty-mcfontface", sans-serif !important; font-weight: 500 !important; font-style: normal !important;Note that THIS version lacks reference to standard HTML tags like h3, custom CSS classes like bzhn, or anything else having to do with curly braces. All I put in was what Adobe provided me for the font I wanted to use here, except with those quotation marks and !important added in.
This all seems to work well on my website! Hooray!
If you, dear reader, are also confused by this in the distant future, I hope it helps save you time. Or at least that it helps you find out whether you’re on the right track. Good luck out there.
-
Thanks so much for taking the time to share such a detailed breakdown of your process, and congratulations on getting everything working. Your explanation is incredibly helpful for others who might be trying to connect Adobe Fonts with the block editor on WordPress.com.
For anyone looking to explore more font-related options, these guides might come in handy:
- Upload custom fonts: https://wordpress.com/support/custom-fonts/upload-font/
- Manage installed fonts: https://wordpress.com/support/custom-fonts/manage-installed-fonts/
- Add custom CSS classes to blocks: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
We really appreciate you taking the time to document this so clearly for the community.
- The topic ‘How do I add my Adobe Fonts to my site builder Typography dropdown box?’ is closed to new replies.
WordPress.com Forums 