Adding custom font families to the Pro font manager

Adding your own font files into the Pro builder has been a feature available to us since the 2.3.0 release. The interface for doing so makes it easy, but there are 2 caveats that many users still run into. Here I will quickly show you how to use the feature, and explain the caveats (and workarounds).

The first step is to open the preferences menu from any builder interface, by clicking the gear icon in the lower left:

When the preferences modal opens, click Fonts on the left tab, and scroll down to the Custom Fonts section:

Next you will click the + ADD section where a media uploaded will appear. This is where you upload your font files (I recommend WOFF and WOFF2 files at a minimum).

Note: it is important that you follow all licensing rules for the webfont to ensure you are in fact allowed to use it. If your download only came with a TTF or OTF file, you can use a webfont generator to create WOFF files.

Caveat #1: Unable to upload WOFF font files.

By default, WordPress does not allow these files to be uploaded. Here’s a quick fix to place in your child theme:

When all your files for the font family have been added, you will see fields to specify their characteristics:

This is where you will set the font weight and the font style for the files (applicable if your font comes with multiple files for each variation). When you are happy, press Add To Font Manager, and then Save Fonts.

You will now see your custom font family available on all font family controls in Pro Theme and V2 elements.

And you’re done!

Caveat #2: Using the font outside of V2 elements.

Sometimes we might need to load a custom font, but apply it to a classic element via CSS. Sadly, this new font isn’t actually enqueued unless it is selected inside a V2 element or in the global typography settings. There is a workaround to this, however. Simply load an empty V2 text element on the page where it’s needed (or in the footer if it’s global), and set the font on that element to your new custom family. Now, you can use the above font family anywhere in your CSS with the font-family name supplied in the font manager. In my example above, that would be “Action man”.

So there you have it. I hope this is helpful for some of you!

---

Note: Themeco has now included this functionality in Pro 2.3.0+ and X 6.3.0+, the following tutorial is no longer needed if you’ve upgraded to those versions or later. This is kept for legacy support.

The font manager in Pro theme is a life saver for managing your fonts, but what if you have a custom font file enqueued that you’d like to access?

I’ll preface this tip with 2 things: 1) first, this should be considered experimental. The Pro theme builder has the foundation made for custom fonts, which means that at some point in the future, Themeco will be providing an interface for that. But why wait? And 2) the javascript code I use here was provided in Kind by Alexander from Themeco directly, I in no way wrote the ember script for this.

First step when wanting to use a custom font is to create your webfont files and enqueue them. You may have been given them when you purchased or downloaded the font. If not, head over to a web font generator like FontSquirrel. Once you have the font files, upload them to your child theme. In this example, they will be in a folder named fonts inside the child theme folder.

Next step is to register the fonts in CSS with font-face.

Here we have a font family of MikesFont and we have used two separate font weights, 300 and 500, under the same font family.

Normally at this point you would be done, and you would simply add a font-family: MikesFont; to the style bar in elements, or apply it to a class. But we want it in the font manager!

This will dictate the steps using the Chrome browser, the inspector, and running custom snippets:

1. Open your Pro builder.
2. Go into Theme Options.
3. Open Chrome’s inspector tool (F12 on Windows).
4. Hit the Sources tab,
5. Click “Snippets” in the left pane.
6. Click “New Snippet”.
7. Paste the following (after editing as described below):

Now, let’s break that down for you:

(function(){ var config = cornerstoneApp.lookup(‘service:store’).peekRecord(‘option’,’cornerstone_font_config’);config.set(‘value.customItems’, [ { family: ‘MikesFont‘, stack: ‘MikesFont, sans-serif‘, weights: [ ‘300’, ‘500’ ]}]);config.save()})();

In the above code, you need to specify 3 things: The font family as set in your CSS above, the font stack (your primary font family, and it’s fallbacks), and the font weights you’ve included.

Once that’s done, right click the snippet file name in the left pane, and hit run. Then refresh your browser.

Done. Your custom font family will now be included in the font manager, allowing you to select it in any V2 element or header/footer control.

And to finish off, some warnings: this snippet adds your font family to an options array in the database, meaning at some point it may get overwritten. If that happens, re-run the snippet above. Also, once Themeco fully integrates custom fonts into it’s builder, you may need to re-add them properly.