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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s