Adding Custom Fonts to Your SharePoint 2013
Looking for something a little different other than the same fonts on SharePoint? Adding custom fonts to SharePoint can be acheieved with a few clicks, and a little tweaking!Firstly, find the font that you wish to use (PLEASE before you go any further ensure you have permission to embed your chosen font on your site!) For the purpose of this blog post, I am going to demonstrate the process using the Google font Raleway. To see more Google fonts: www.google.com/fonts
Now, Google says that you can simply add the following link to your site, and integrate it into your CSS file.
However, I recommend not adding custom fonts from the web this way. For no other reason other than if someone updates your master page or makes any changes to it, there is a chance your web font reference could either be lost or tampered with, resulting in undesirable effects. What I suggest to do instead, is the safe method of:
Manually obtaining and creating the font files
Wherever you obtain your font, ensure you at least have the .tff to your font. On Google fonts, in the top right hand corner, click the down arrow (1). Then click .zip file (2) to download the .tff files for your font.
The .zip file will contain files similar to these.
These are all the different styles associated with your chosen font. Back on the Google fonts site at the top you can preview how these fonts look. Keep in mind which one you have decided on.In order to use your desired font, SharePoint needs .eot, .svg, .ttf, .woff files for your font. We already have the .tff file; so we will use this in order to create the others.Everythingfonts.com has a font-face generator which will create the necessary files for you. Navigate and select your chosen .tff file from earlier and upload it. Now, click get @font-face to download a .zip with all your files. You will find there are some extra ones in here too, but don’t worry; as much as they are useful, we do not need them for this method.
Adding your font to SharePoint
Now we have all the files we need, we should upload them to our SharePoint site. You can really upload them wherever you like within reason, but for this, I will upload them to Themes/15.
Click the cog in the top right hand corner and then select site settings.When the site settings page has loaded, choose Themes from the Web Designer Galleries section. From here, if you select the folder named 15 and either drag and drop or single upload the following files that you created earlier.
While you’re still in this folder, download one of the font scheme files which we will use as a template for our font scheme. In this example, I have chosen fontscheme007.spfont. Once you have downloaded it, open the file in any text editor, even notepad will do.
The file will look similar to this with more fontSlots further down. fontSlots are used to tell SharePoint where these fonts should be used. At the top, for example, we have the fontSlot title. If you scroll further down the file you will find others, like body and navigation. So whether you want to use the same font for everything or just one slot, make sure you perform the following tasks on all your font slots.
This font scheme file stores everything it needs to know about a particular font setup, including for different font scripts, so, for example, it will display either the same or a different font if you are using an Arabic script. We can remove all these if you like, as long as you leave the requires latin, ea and cs typefaces. In the Latin typeface, you will see there is more to this line than the others. I’ve broke this line down for you to see below.
As you can probably guess by now, we want to change these source addresses to the addresses of our files. Largeimgsrcand smallimgsrc are preview images for your font, they aren’t necessarily required and can be initiated as blank: largeimgsrc=”” smallimgsrc=””So all your addresses should follow the address similar to /_catalogs/theme/15/yourfont. Do this for all of your files. Make sure you also change the name of your font at the top of the file to your font family. For example, I changed mine from Typewriter Elite to Raleway.Once you’re finished, save this file under a different name and one related, then upload to the same place you took the original font scheme from on your SharePoint site.
Applying the Style
So by this point, all of our required files should be up on SharePoint ready for us to use. The following steps can be performed on either a new composed look, or using an existing look.
From the cog, choose Site settings again and this time choose Composed Looks. As said above, either edit or create a new look, fill in the other URLs and add our spfont file URL under the field Font Scheme URL.Once you’re finished, when you click the cog in the top right corner and choose Change the look, you should see either your existing or new look there. When selected and happy with the preview, click Try it out. If all has went well with the above steps, your custom font should now be displayed!