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 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 that 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 accomplished 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 site's stylesheet. That's it! Close out the Stylizer and you'll notice that your site is now using the custom font you specified.