Add Font Face To SharePoint 2013 Ribbon using CSS

In this article, I will explain How to

Add a new Font Face To SharePoint Fonts List In SharePoint Ribbon.

Add Custom Font in SharePoint 2013

Add A New Font In SharePoint.


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

Add a new font in SharePoint fonts list

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

Add your custom font in SharePoint Editor

  • Edit file in Advanced Mode.

Import new Font in SharePoint 2013 Ribbon

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

@import url("");

-ms-name: "Droid Arabic Kufi";
font-family: 'Droid Arabic Kufi',Sakkal Majalla;

Add new Font Face in SharePoint Content Editor

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

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

Add new Font Face in SharePoint Page Editor

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

Import Font Faces in SharePoint Format Text List

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 the CSS that you have just created.

Add a new Font in SharePoint Content and Page Editor

  • 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.

Add a new font in SharePoint Editors

Applies To
  • SharePoint Server 2013.
  • SharePoint Server 2010.

In this article, I have explained How to add a new font to SharePoint fonts list?

2 thoughts on “Add Font Face To SharePoint 2013 Ribbon using CSS

Leave a Reply

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

You are commenting using your 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