Different looks of my css in Chrome, Firefox and Safari

[Max_Saravia]

Hi!, i gonna build a new app soon, and im playing with the design panel and the styles panel. I created a css file with wappler and did some work with this top var as u can see here:

But when i did a test in Chrome, Firefox, and Safari this is what i got:

As u can see in this pic, on the left Firefox shows it perfectly, Chrome on the right has some problem with the typography, colors and the avatar radius. Finally with Safari on the center i got everything ok exept for the typography.
Any solution to this problem?
Thnks in advance!

[Max_Saravia]

Ok, i forgot to check deleting the cache on chrome ,now it works perfectly. But in Safari keeps doing the same.

[Teodor]

Can you paste the CSS code you are using for the gradient? Also for the circle image?

What font are you using and what font type? This may be useful to debug the font issues you are having:

https://www.w3schools.com/css/css3_fonts.asp

[Max_Saravia]

Hi @Teodor the font is Lobster, this is the css code of my test:

The circle:

.style5 {
width: 150px;
height: 150px;
background-repeat: repeat;
margin-top: -70px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px}

And the text:

h1.text-white {
font-family: Lobster}
#test { }

[Teodor]

Ok, but how is the font included?
I also don’t see the CSS for the gradient?

[Max_Saravia]

Im using google fonts: <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">

I got that code inside the head

[Max_Saravia]

ok i got the solution i had the wrong font inside the head i had “Oswald” instead of Lobster, i dont know how but Firefox and Chrome showed correctly the font but no Safari Thnks!