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:

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.

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

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