SharePoint 2013 enables you to add specific styles to your custom CSS
that can be accessed through the ribbon and used by content authors on your site
- Font Face—The font face used on the selected text.
- Font Size—The size of the selected text.
- Highlight Color—Background color behind the selected text.
- Font Color—The selection text color.
- Styles Page Element—An HTML element will be injected around the selection and a style will be applied to that element.
- Styles Text Style—A specific style will be applied to the selection.
/*--Font Face--*/
.ms-rteFontFace-SECFontFace {
-ms-name: "SEC Font";
font-family: 'Comic Sans MS';
}
/*--Font Size--*/
.ms-rteFontSize-SECFontSize {
font-size: 25px;
}
/*--Highlight Color--*/
.ms-rteBackColor-SECBackColor {
background-color: #25408f;
-ms-name: "";
-ms-color: "SEC Blue";
}
/*--Font Color--*/
.ms-rteForeColor-SECForeColor {
color: #e98013;
-ms-name: "";
-ms-color: "SEC Orange";
}
/*--Styles - Page Element--*/
DIV.ms-rteElement-SECElement {
-ms-name: "SEC Element";
}
.ms-rteElement-SECElement {
border: 1px solid #e98013;
}
/*--Styles - Text Styles--*/
.ms-rteStyle-SECStyle {
-ms-name: "SEC style";
color: #e98013;
font-size: 25px;
}
After that you will see the Font in Editor as in below image:
