Adding Custom Fonts using the Stylizer

Todd Chessum -

The Prime Stylizer provides the option to select from a number of web safe fonts. However, there are times where you may want to apply a custom font to confirm to brand guidelines, or personal preference. 

select-font-family.png

Fig 1: Selection desired Font Family from the Prime Stylizer

This customization is made possible via the themename-custom.less file which is auto generated whenever a new Stylizer theme is created, and made available within the Emgage | Prime Stylizer Themes document library. This file provides the ability to further customize a theme beyond the many options available within the Stylizer App, and is intended for advanced users with some understanding of CSS. Assuming your comfortable with CSS, here's how to add a custom font to your theme:

Step 1: Located and Download the themename-custom.less file

From the root site of your Emgage enabled site collection, navigate to Site Contents, then locate and open the Emgage | Prime Stylizer Themes document library. You'll see a list of files which correspond to your Stylizer themes. Find the one with a name that matches the Theme you would like to customize and directly under it you will see a file with the same name, but with "-custom" appended to it. Go ahead and download this themename-custom file as it's the one will be adding our customizations to. On download you'll find that this files full name is themename-custom.less. Go ahead and open this file in your preferred code editor, or in a simple text editor such as Notepad or Notepad++ (Win), or TextEdit (Mac).

Step 2: Embed the Desired Font

Using Google Fonts

If you're adding a font from Google Fonts, embedding your desired font is as simple as copying the @IMPORT code they provide into the themename-custom.less file you have open. Note that since the contents of this file will be made part of the site stylesheet, you do not want to include the <style> tags provided by Google. Simple copy the @import statement, shown highlighted in blue in the Fig 2 below.

google-font-embed.png

Fig 2: Google Fonts @IMPORT embed code with @import statement highlighted

Your themename-custom.less file should now look something like this:

theme-custom-goolge-import.png

Using Font Files and @Font-Face

Font Licensing Note: Many fonts require a webfont license when served for use on a web or intranet site. Make certain you have met all licensing requirements for your desired font prior to embedding the font for use on your site.

To embed your desired font(s) using at @font-face, you'll need to first add the font files to a location they can be served to all users without any permission issues. We recommend navigating to the Site Contents on the root site of your Emgage enabled site collection, locating and opening the Style Library (all users have read permissions to this document library) and creating a new folder within the Style Library for housing your web font files. For this article, we will assume a new folder with the name Custom was created, and within that folder another folder was created with the name fonts. Once the desired folder structure has been created, upload the desired webfont files to it. Make sure to Check In and Publish each added file as a Major version so that it will be accessible to all users.

With the files added, we can now add the required @font-face references to the themename-custom.less file. When finished the themename-custom.less file should now look something like this:

theme-custom-_font-face.png

Step 3: Specifying the Custom Font

To apply the custom font you added above, it's simply a matter of specifying for it to be used instead of the one selected within the Stylizer App. This is accomplish by overriding the following variables used by the Stylizer:

@prime-base-font-family: add your custom font stack here;
@prime-webpart-title-font-family: @prime-base-font-family;
@prime-homepage-webpart-title-font-family: @prime-base-font-family;

Simple copy and paste the above code into your themename-custom.less file and replace the "add your custom font stack here" text with your desired font stack.

When finished the themename-custom.less file should look something like this (if using @font-face for the embed, you'll have a lot more lines in your file):

theme-custom-ready.png

Step 4:  Adding and Applying your Theme Customizations

We're almost done! Now that your themename-custom.less file has the necessary font embed and specification code in it, we're ready to apply it to your site. First save your themename-custom.less file, then re-upload it to the Emgage | Prime Stylizer Themes document library. Select the "Replace It" option when uploading, as we want to replace the previous version. We now need to apply the customizations within the themename-custom.less file to your site. To do this, open the Prime Stylizer by clicking on the Settings gear (located in the upper right of screen for SharePoint 2013, 2016 and Online), or clicking Site Actions (located in the upper left of the screen for SharePoint 2010) and selecting the Prime Stylizer option on the drop down that appears. With the Stylizer App open, confirm that the desired theme is selected and click the Apply Theme button (located at the bottom right of the screen). This will incorporate your customizations into the sites stylesheet. That's it! Close out the Stylizer and you'll notice that your site is now using the custom font you specified.

 

 

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk