SharePoint custom fonts and styles

SharePoint is also considered as a Web CMS. Whether it is a Content Editor Webpart, a Rich HTML Field or a Publishing page the Ribbon offers formatting and design capabilities, which looks like all Office Products.

 

To make the redaction of articles easy and standard(in case of a corporate design) we can add both custom fonts and text styles to the ribbon elements, such Headlines, HR News…etc

Fonts

We can add more fonts, which are either based on standard ones, or on custom fonts that you purchase. And it is very easy within SharePoint. You should just add some special classes to your loaded CSS.

You should just add a class definition named “ms-rteFontFace-XXX”, where XXX is a random ID.

.ms-rteFontFace-132{
-ms-name:”Gotham Book”;
font-family:”Gotham Book”;
font-size:13px;
}

This will add a new Font “Gotham Book”.

PS: the font files should be loaded using “@font-face”

@font-face {
font-family: ‘Gotham Book’;
src: url(‘path/GothamBook.ttf’) format(‘truetype’);
}

 

Styles

We can add preconfigured text styles, and here we will add a Headline with the font Gathoma Light, red color and with 30px size.

.ms-rteStyle-CustomHeadLines{
-ms-name:”CustomHeadLines”;
font-weight:300;
font-family:’Gotham Light’;
font-style:normal;
color : red;
font-size: 30px;
}

Advertisements