Apply custom font site-wide from "theme settings" instead of manually overriding code

Store Design
1

Hi,

I have successfully uploaded a font onto Shopify with woff/woff2 files. I wanted now to display this font like the others available on the theme Settings > Typography section, so that other people who are not developers can change the font when they like instead of having to change the code “forcing” an override of the font family as follows:

* {
  font-family: "bryant-web"!important;
}

Therefore, how can I achieve the application of the font site-wide without overriding the CSS as above? How can I display the newly installed font in the theme settings?

Thank you.