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
The Font Manager is part of the Theme Options in the X and Pro themes. Follow the steps below to access the Font Manager:
- Go to X/Pro > Theme Options.
- Click the settings icon (Cog Icon) at the bottom left-hand side of the screen.
- Click the Fonts tab in the modal.
How to Create the Fonts
The Font Manager screen in the modal that opened in the previous section consists of the sections below:
- Font Manager: You can use this section to add aliases and assign fonts to them.
- Google Subsets: You can use this section to assign the Google Font subsets in cases that you use languages other than English. Such as Cyrillic, Cyrillic Extended, et cetera.
- Adobe Fonts: Use this section to connect your website with your Adobe Fonts account if you want to use that service for your website fonts.
- Custom Fonts: Use this section to upload custom web fonts to your website.
We are going to discuss each section in details and describe how to create fonts:
To create fonts in the Font Manager you can use this section. Click the Add New item at the very bottom of the screen to add a new font alias. You can use the already created ones and edit them by clicking the arrow icon at the left-hand side of each item. To rename each item, double-click the name and it will turn into blue and you can change the name of the alias.
Each alias item can have a font assign to it. On the screenshot above we selected the Offside Google Font. The list of the fonts consists of the System Fonts, Google Fonts, Adobe Fonts, and Custom Fonts. The system and Google fonts do not need any setup and are available out of the box in the X and Pro themes. We will discuss the setup process for the Adobe Fonts and Custom fonts later in this article.
Depending on the font that you select, you will be presented with the font weights which usually varies from 100 to 700. In our example, the Offside font only has the regular (400) font weight. You can decide whether you want a specific font weight loaded to the website and used later or not by checking/unchecking the font weight.
Each alias can be duplicated or deleted using the icons on the right side of the alias item. Finally, click Save Fonts after you finish adding the fonts.
The X and Pro themes are prepackaged with the Google Fonts and as we mentioned in the section above you can select the Google Font in the Font Manager. Google Font does not include the language-specific subsets by default. If you use a language other than English you may need to include the language-specific subsets. You can add the subsets using this section. Click the select input and you will see the list of the subsets available. You can add one or more subsets to the website.
It is important to know that adding too many subsets causes the website to load slow as it gets heavy because of the loading of all those subsets.
Adobe Fonts is a service which partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day and the Adobe Fonts section of the Font Manager is the way to integrate it with X and Pro themes.
Subscribe to the Adobe Fonts service and create Project there. A Project can have multiple fonts that you can assign to. After that, you satisfied with the fonts which you assigned, add the Project ID into the Adobe Fonts Project ID input and hit the Refresh button. Wait for few seconds and all the fonts that you added to the Project in the Adobe Fonts website will be listed. That shows the Adobe Fonts is integrated correctly with the theme and you can select a Adobe Fonts font in the Font Manager section as the fonts will now be listed there.
The Custom Fonts section of the Font Manager is to upload and assign your custom web fonts. The way it works is very similar to a normal Font Manager font addition process.
Click Add New to add a new alias which will contain the custom font variations. Then click the Import Font Files button to show the font upload/selection screen:
You can upload or select the fonts that you already uploaded to the website and click the Select Font File(s) button. It is important that you provide the .woff and/or .woff2 font file types. The other types are not web friendly and might not work on all browsers.
You can select more than one font file in a case that a font has a separate file for the regular, bold or italic variations. After this process, the variations will be listed under the font alias that you added and you can assign a font file to its proper variation:
Now that you added the Custom Fonts, those fonts will be available in the Font Manager font selection list and you can select them there for your website.
How to Use the Fonts
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 X/Pro > 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