Fixing font styling issues in your SPFx application customizers

June 24, 2019

This will be a quick tip about a styling issue with the application customizers. If you are building application customizers that render something in the available top or bottom zones. It is recommended to add your own font styles. This might sound weird, but when you don’t do this, you might end up with styling differences between your pages.

Here is an example of loading a sample application customizer on a modern page and in a list view:

Font size differences between pages
Font size differences between pages

The text on the list view is a bit bigger. The reason for this font size difference is that the body element on a modern page contains the ms-font-m class. This automatically sets the font size to 14px and font weight to 400.

ms-font-m class on body
ms-font-m class on body

On all other pages, this class is not present and due to that differences will occur.

No ms-font-m class present
No ms-font-m class present

An easy fix would be to add the ms-font-m class on the root element from your application customizer.

Comments

comments powered by Disqus