What is the Font Manager
The Font Manager is a feature in the X and Pro themes which allows you to give a name to a font to use on your site. Meaning you can switch a font under an alias and it'll instantly update sitewide, saving you time on going back and forth editing individual fonts.
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 Adobe Fonts 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.
When to Use 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.
How to Access the Font Manager
- Go to X / Pro in the WordPress admin and launch the app interface by selecting any Builder (Content, Headers, Footers, et cetera). Alternately, launch a Builder using the WordPress admin bar on the frontend of your site.
- Click the navigation icon (☰) in the toolbar.
- Select Fonts in the main Navigation dropdown.
How to Setup the Font Manager
Once you have clicked on the Fonts menu item, you will see the following in the Font Manager submenu:
The Font Manager submenu is broken down into five different sections that allow you to manage fonts throughout your site:
- Google / System Fonts: Add aliases and assign fonts to theme.
- Google Subsets: Add Google Font subsets if needed.
- Adobe Fonts: Connect your website with your Adobe Fonts account if you want to use that service for your website fonts.
- Custom Fonts: Upload custom web fonts to your website (e.g. .woff files).
- Font Display: Manage how fonts are loaded into the browser and when they should display.
Google / System Fonts
To utilize Google Fonts or system fonts for your design, you will start with the first section at the very top. If you have not yet added your first font, click the Add New button and you will see the following:
Each item added in this sortable list represents a font family. You can rename these items however you would prefer, but we typically find it is best to use more general names like “Body Copy” or “Headline Copy” rather than the actual font family used. In keeping with that example, if you wanted to add two fonts to use for your design, you could do something like the following:
Take note that for each font family added, within that sortable item you will select the actual font family used along with your desired font weights to pull out of that family. The families and weights you specify here will be used later in the design process. Once you have setup your font families and weights the way you want, make sure to click the Save button in the Builder.
In case you are using a language other than English and require certain glyphs and figures for your design (and are using Google Fonts), you can specify your desired subsets here.
Remember to click the Save button in the Builder if you have added any Google Fonts subsets to your design.
If you are using the premium service Adobe Fonts, you can link your font projects for your design here. To do so, go to your Adobe Fonts account, locate the project you wish to use, and enter the project ID in the input below. Once you enter the project ID and refresh the submenu, you should see a table displaying which fonts you are using for your design:
After adding your project ID, make sure that you have clicked the Save button in the Builder you are using.
In the case that you have a custom font file you have purchased from a foundry online, you can upload those files to use within the Builders as well. To get started, click Add New under the Custom Fonts section and you will see a sortable similar to the Google / System Fonts section above:
Rename your font how you want in the sortable handle and then click on the Import Font Files button to bring up the WordPress media library:
Once the library is open, uplaod your font files if you have not already done so. It is recommended that you use .woff files for the most broad browser support (othewise you will have to upload and manage multiple formats). After you have uplaoded the fonts you will see something like the following:
For each font file you have uploaded, you can specify what weight and style should be associated with it. You can tweak these as needed in the future, or add new files if you are missing any. Individual files can also be deleted should you run into an issue. As always, make sure to click the Save button in the Builder after you are done setting up your custom fonts.
Finally, the Font Display section allows you to set the global
font-display property vaue for your site.
font-display gives users control over how the timeline for fonts being loaded into the browser should be executed. The value selected will be utilized in supported browsers where applicable across your site:
Like any changes made throughout the Font Manager, ensure you have clicked Save if you update your Font Display setting.
How to Use the Font Manager
Now that you have the font aliases added to the Font Manager you can use those aliases throughout the builders in the theme. That includes Cornerstone in the X and Content, Header and Footer builders in the Pro theme. Whenever you work with an Element in the builder and there is an option to set a font, you will be presented with the list of the font aliases that you already have been created in the Font Manager:
Depending on the font that you choose there, the Font Weight list will change to represent the available font weights of the chosen font.
Enabling Font Manager in the Theme Options
To enable the Font Manager for the whole website including the theme generated text which is not available in the builders you need to follow the steps below:
- Go to Theme Options → Typography.
- Enable the Font Manager Options.
- Scroll down to Body and Heading options.
- Select the proper font which you added int he Font Manager in the Body and Header fonts options.
We've introduced the Font Manager feature of the X and Pro themes in this article. Additionally we've explained how to access the Font Manager and the creation of the font aliases process. Also we've discussed various font types that can be added including system fonts, Google Fonts, Adobe Fonts, and Custom Fonts. Finally, we've talked about the usage of the created fonts throughout the builders and the Theme Option.
See something inaccurate? Let us know