Search code examples
angularsassvmware-clarity

How to change the default font in VMware Clarity?


This is from documentation:

Clarity includes several SASS variables, collections, mixing, and functions for working with typography. These are described below:

$clr-font

This SASS variable points to our default text font, Metropolis.

I don't know how to change it.


Solution

  • All of the scss variables are customizable but you need to overwrite them with your preferred values. This can be done with a custom theme. The docs have details on how to set this up for an app built with the cli tooling: https://clarity.design/documentation/themes