This article was last updated on the May 17, 2018.
Table of Contents
The Font Manager is one of the easiest ways to manage your fonts with no hassle and instant updating site wide! Going back and changing 20+ font options is a thing of the past.
Pro v2.1.0+ and X v6.1.0+
To get started, open up your builder and click on the cog icon in the left bar to open up the Settings Modal. Below is a screenshot of where you will find it in the Content Builder:
And here is a screenshot of where you will find it in the Header and Footer Builders:
Once you've opened the modal, go to the Fonts tab to open up the Font Manager. By default you will see the following screen:
Clicking Add New will introduce new fonts that can be setup and used later throughout your designs. Double-clicking the label will allow you to rename your font to anything you like to help you organize things. Clicking the arrow to the side of the label will reveal the font selection tool for that font. On the left, you'll see a dropdown where you can select the font you want to try out. When a font is selected, it's available weights will display below. Clicking the checkbox for all weights you want will make them available throughout the tool. Clicking the "Preview" button by each weight will preview that weight in the area to the right:
Further down the modal you have some options you can manage for Google Fonts, as well as an input for a Typekit ID if you wish to use Typekit fonts on your website. Adding in your Typekit ID will allow for the fonts you've added to that particular kit to show up in the select mentioned above:
Once you've added all of your fonts, they will be available to you throughout the tool anywhere there is a "Font Family" dropdown. The labels given to each font in the tool will be displayed in the dropdown:
Once a font family has been selected, the "Font Weights" dropdown will update it's values to display what weights are available for that font family.
The beauty of the Font Manager is if you ever want to go back and make adjustments to your site's fonts, you can update it in one spot in the Font Manager and it will be automatically reflected across your entire website! This is an incredibly powerful tool that should certainly be taken advantage of for large builds, and even smaller sites alike. Imagine if you had a long landing page full of Elements. It's easy to imagine that you might be calling up the same fonts over and over again across your design...probably hundreds of times. One thing to keep in mind is that hosted fonts from a service like Google Fonts or Typekit add weight to your site, so make sure to keep your selections minimal when utilizing those rather than system fonts like Georgia, Helvetica, et cetera.
Pro v2.0.4- and X v6.0.4-
To access the font manager you will need to go to WordPress Dashboard > X > Fonts or WordPress Dashboard > Pro > Fonts:
On the left-hand side, you have your existing fonts and can add new fonts. Then in the center, you have the font selector and the font preview. Clicking on a font on the left-hand side will select that font for editing. Once you've selected the font you'd like to edit. You can then pick the font you want from the drop-down in the center like this:
After that you will see a screen like this:
The fonts available for selection are system fonts (WordPress) and every Google font available. Once you've selected the font you want, the available font weights will be loaded all of which can be previewed. If you hover over the font weight you'll see a preview link like this:
If you then click on that Preview link you'll see the font update in the live preview like this:
Another option available within the Font Manager is Adobe Typekit and to enable extra character font subsets for the Google Fonts. To access these options click the cog/settings icon in the Font Manager interface at the bottom-left section:
You should see now the new options for the character subsets and Adobe TypeKit like this:
To add a new character subset just click in the dropdown and you'll be presented with a list of available subsets like this:
Now if you click on TypeKit you'll see the Adobe TypeKit options like this:
Once you've entered your Adobe TypeKit ID you'll see a list of available fonts which will then be selectable from the dropdown in the Font Manager. To get your Adobe TypeKit ID follow our other article here you don't need to install our Adobe TypeKit extension just follow the article from the Getting your TypeKit ID section.
Once you've finished editing your fonts click on save in the bottom left and your fonts will be updated throughout the site. This is useful if you want to change a specific font all at once. For example, if you use a specific font for h1s, you can add a font and then in the theme options set that to be used for your h1s, then if you want to switch to a new font, just come into the font manager. Change the font used click save and it'll be updated everywhere on your site.
What is the purpose of the Font Manager?
The Font Manager serves as an abstraction layer for easily assigning and updating fonts throughout the builders. For example, say you have some pages you've designed and they're using a couple very specific fonts. Maybe you have dozens or even hundreds of instances of these fonts across your site from paragraphs to headings to buttons and more. Now let's say that down the road you decide that one of those fonts used throughout those hundreds of instances needs to be updated. Without the Font Manager, you would need to revisit every element and update that font...one by one...hundreds of times over. With the Font Manager, you can instead label a font however you see fit (e.g. "Body Copy") and assign that labeled font. If you ever have to go back and update that font, you can simply update it once in the Font Manager and it will change all assignments of that font throughout your website.