Fonts look different in the WYSIWYG editor?

Maureen.B.923

Does anyone have an explanation for why fonts appear different in the WYSYWIG editor than when you view the same content in the Content tool?

Below is an example where, in the editor, the H1/H2 headers look bolder and bigger than when you view the same content in the content tool.

Miguel.S.245

Hello Maureen,

The difference in font appearance between the WYSIWYG (What You See Is What You Get) editor and the Content tool in Brightspace (or any other content management system) is due to the way these tools handle and render CSS (Cascading Style Sheets).

In the WYSIWYG editor, the styles (like font size, weight, color, etc.) are often applied inline to give the user a close approximation of how the content will look once published. However, these styles might not always match the final output in the Content tool.

When you view the same content in the Content tool, the styles are controlled by the site’s global CSS. This means that the font size, weight, and other style attributes might be overridden by the global styles set for the site, leading to a difference in appearance.

In your example, the H1/H2 headers appear bolder and larger in the editor because the editor might be applying its own styles to these elements. But when viewed in the Content tool, the global styles of the site take precedence, which could be why they appear thinner and smaller.

You can use Brightspace's "Preview" feature to see how your content will appear to students. This provides a view that more accurately reflects the final appearance of the Content tool.

I hope this helps! If you have any more questions, feel free to ask!