Adding custom font families to the Pro font manager

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.

@font-face {
  font-family: 'MikesFont';
  src: url('./fonts/MikesFont.eot');
  src: url('./fonts/MikesFont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/MikesFont.woff') format('woff'),
    url('./fonts/MikesFont.woff2') format('woff2');
  font-weight: 300;
}

@font-face {
  font-family: 'MikesFont';
  src: url('./fonts/MikesFontBold.eot');
  src: url('./fonts/MikesFontBold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/MikesFontBold.woff') format('woff'),
    url('./fonts/MikesFontBold.woff2') format('woff2');
  font-weight: 500;
}

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):
(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()})();

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.

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Michael BourneKyle Bailey Recent comment authors
  Subscribe  
Notify of
Kyle Bailey

As always, genius! Thanks for putting the effort it Mike.