Add Font Faces to Format Text in SharePoint 2013 Ribbon using CSS

In this hint, I will show How to Add  Font Faces to Format Text in SharePoint 2013 Ribbon using CSS

Fontface to Format text in SharePoint via css

Steps:

  • Open SharePoint Designer 2013 > Open your site.
  • File > New >  Add Item > More Pages > CSS > Create.

Create new css file in sharepoint designer

  • Or go to All files > Style Library > Right click > New > CSS.

Create new css file in sharepoint Designer

  • Edit file in Advanced Mode.

Edit file in advanced mode

  • Paste the following code based on your font requirement. in my case, I will use “Droid Arabic Kufi”

@import url("http://fonts.googleapis.com/css?family=Droid%20Arabic%20Kufi");

.ms-rteFontFace-custom1
{
-ms-name: "Droid Arabic Kufi";
font-family: 'Droid Arabic Kufi',Sakkal Majalla;
}

add Fontface to Format text in SharePoint via css

Note:  Regarding SharePoint 2010 only you need to change the class name from .ms-rteFontFace-custom1 to .ms-rteFontFace-12

  • Save the file > Check in > Publish as a major version.

Checkin-Publish file in SharePoint

  • Go to Site Setting > Look and feel > Master page.

Master Page - look and feel

Note: if your site is not publishing site > Edit Master Page via SharePoint Designer and link CSS file to it

  • At Alternate CSS file.

Alternate CSS URL

  • Click on Browse to select your CSS that you have just created.

Set Alternate CSS URL

  • Go to any page that has content  or a list item that has Rich Multiple line field >  Click to write content > from the above ribbon > within Format Texting > Select Font that should be now shown on this list.

Fontface to Format text in SharePoint via css

Enjoy 🙂

Advertisements

2 thoughts on “Add Font Faces to Format Text in SharePoint 2013 Ribbon using CSS

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s