Alert This post is over a year old, some of this information may be out of date.

Fixing font styling issues in your SPFx application customizers

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:

Show image 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.

Show image 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.

Show image 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

Back to top