Issue with custom typography and related problems

Technical Help
,
1

Are you using our SaaS platform (Baserow.io) or self-hosting Baserow?

SaaS

What are the exact steps to reproduce this issue?

  1. The typography does not update as stated in the tutorial:
    a. Customize Your Baserow App with Google Fonts | Custom Code Demo
    b. Custom code demos

  2. It is mandatory to add !important for typography changes to take effect:

  3. It does not work in the same Template either.

    Template Preview
    Template Preview1336×258 13.6 KB

    Template CSS
    Template CSS968×705 50.4 KB

  4. Here is an example of the code with the inclusion of !important to make it work:

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

.ab-heading--h1 {
	font-family: "Oswald",sans-serif !important;
}
  1. Is it possible that this affects other variables in the Custom CSS? When testing the Template, several elements disappear (Chart.js), and in other applications it does not work correctly.
2

@frederikdc could you please check this out?

3

Hi,

The fonts are indeed overwritten by de default fonts set in the CSS variable. Using !important is a good work around, I’ll notify the dev team about the issue.

4

Thanks for the bug report @khalil.io! This has been fixed, and will be in the next release.

Cheers,

Peter