Add Font Face To SharePoint 2013 Ribbon using CSS

Add Font Face to SharePoint Ribbon Using CSS

In this article, we will explain how to add Font Face to SharePoint Ribbon Text Format using CSS in SharePoint 2013 as well as SharePoint 2016.

Add font face to SharePoint Ribbon using CSS
Add font face to SharePoint Ribbon Text Format Using CSS

Font Face In SharePoint Ribbon

In Sharepoint 2016 and 2013, when you edit page content or add a new content editor web part, you will note that new options have been added to the SharePoint Ribbon like Format Text to can change the content font type and theme fonts and font size …etc.

Add Font Face to SharePoint
Add Font Face to SharePoint

But in some cases, the default fonts are not satisfied with our requirements and we may need to add additional font faces to the current built-in SharePoint Fonts List at SharePoint Ribbon. So Is it possible to add font in SharePoint Ribbon Text Format?

Add Font Face to SharePoint Fonts List In SharePoint Text Format Ribbon

In this section, we will show step by step how to add Font Face to SharePoint Fonts List In SharePoint Text Format Ribbon.

Steps

  • 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("https://fonts.googleapis.com/css?family=Droid%20Arabic%20Kufi");

.ms-rteFontFace-custom1
{
-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 the CSS file 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. You might also like to read Missing save site as template SharePoint Online.

  • 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

Conclusion

In conclusion, we have learned how to add a new font in the SharePoint Font List for the Text Format Ribbon.

Applied To
  • SharePoint 2016.
  • SharePoint 2013.
  • SharePoint 2010.
You might also like to read
Have a Question?

If you have any related questions, please don’t hesitate to ask it at deBUG.to Community.

 

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

Leave a Reply