Error with custom CSS on Front-End area

This is the CSS code:

@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap')

html, body, #loginform {
   font-family: "Comfortaa", sans-serif !important;
}

.login form {
    background-color: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
}

The “.login form” CSS rule works (imported)

The new “html, body, #loginform” CSS rule doesn’t work (added after import)

I tried selecting individual elements (form, button, etc.) and it works

So why doesn’t it work on the bodysuit? On the other sites where I have installed Branda it works perfectly

Among other things, on the DB error page I selected the “.page” css class to change the background and it still doesn’t work

Hi @francy27

I hope you are doing well.

I checked your login page and it is working well:

https://monosnap.com/file/Scw0tCcGyuqyn0WTgVawg8miFOFyLP

Could you share the full CSS that wasn’t working along with the DB error page CSS? So we can run some further tests on our lab site.

Best Regards
Patrick Freitas

This is the CSS login full code:

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&display=swap')

html, body, #loginform {
   font-family: "Comfortaa", ubuntu, sans-serif !important;
}

button, input, form, label {
    font-family: "Comfortaa", ubuntu, sans-serif !important;
}

input.button {
    font-weight: bold;
    text-transform: uppercase;
}

.login form {
    background-color: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
}

And this is the CSS db page full code:

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&display=swap')

.page {
    background-color: #fff !important;
    padding: 2em !important;
}

body {
    font-family: "Comfortaa", sans-serif;
    background-color: #0979b4;
}

On the DB error page the font is loaded correctly, while on the login page it is not.

If I inspect the code my font declaration is not found by the page, so it doesn’t overwrite the original one.

On the db page, however, it works, but I set the .page background to #fff but it doesn’t change, similar behavior to the login page here too

Hi @francy27,

Hope this message finds you well.

Same as Patrick the login page is working and the CSS too:

https://prnt.sc/EX7TyU9UXBnB

Could you add the !important to the body CSS?

Let us know if does work after that.

Best regards,
Laura

Hi @francy27,

We haven’t heard from you in a while, I’ll go and mark this thread as resolved. Note that you can still reply on this topic.

If you have any additional questions or require further help, please let us know!

Best regards,
Laura