If you use a richtext field in a list form, the style in the richtext control is different to the style on the page. This is because the richtext field uses an iframe and there is no style applied to the iframe document. So the iframe uses the default font configured in the browser’s settings. In my case “Times New Roman”.
If you want to use the same style as other controls on the page, you can use this simple script code.
This script appends a link element referencing a CSS file to the HTML head of all richtext iframes.
jQuery(document).ready(function ($) { //get richtext iframes var iframes = $("iframe.ms-rtelong, iframe.ms-rtelonger"); iframes.each(function () { //get the iframe document var doc = frames[this.id].document; //create a link element var link = doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); //reference the style file link.setAttribute("href", "/_layouts/15/1033/STYLES/Themable/corev15.css"); //add the link element to the iframe head doc.head.appendChild(link); }); });
jQuery(document).ready(function ($) { //get richtext iframes var iframes = $("iframe.ms-rtelong, iframe.ms-rtelonger"); iframes.each(function () { //get the iframe document var doc = frames[this.id].document; //create a link element var link = doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); //reference the style file link.setAttribute("href", "/_layouts/15/1033/STYLES/Themable/corev15.css"); //add the link element to the iframe head doc.head.appendChild(link); }); });
Note: I appended the corev15.css file from the 1033/STYLE/Themable folder. Change the URL if you want to use another css-file.
Include this script code in your custom js file or use a content editor web part to add the code to the form.