fix: set lato as the default font and use montserrat for headings

[anoblet]

https://app.clickup.com/t/86b2pt9td

Description

This PR solves # .

Steps completed:

According to our definition of done, I have completed the following steps:

• Acceptance criteria met
• Unit tests added
• Docs updated (including config and env variables)
• Translations added
• UX tested
• Browsers / platforms tested
• Rebased & ready to merge without conflicts
• Reviewed own code

[lkraav]

I think "headings", not "headers"?

[pawelkmpt]

• we should avoid using !important especially for such basic rule
• file you put rules in only defines variables, we should follow this approach and place actual rules somewhere else
• find where $body-alt-font-family is used. maybe it's a matter of editing this var? if not maybe we need one more var to be placed in headings across the styles

[anoblet]

$body-font-family and $body-alt-font-family are pretty ubiquitous, and are polished on the component level. Replacing font family on a global level for headings is the best strategy?

[anoblet]

I'll take a look on Monday and see if there's a way to create more specificity.

[anoblet]

I moved the rule into a separate file(_custom.scss). As for the specificity, it's difficult to not use important since font-family is defined in hundreds of components, and the generated class for each component takes precedence. A mass search and replace would make it harder to sync upstream at a later date.