Issues with fonts and button gradient

Support
#1

Hi, I have issues with the fonts on the website I’m making.

http://cfte.valentin.graphics/index.php/cfte-home-page
http://cfte.valentin.graphics/index.php/ai-in-finance/ Those are the pages

I’ve uploaded few fonts via the Fonts panel tab in the builder, and on my side everything seems fine, however when I open it on another computer or mobile some other generic fonts load.

Also on the second section of the AI in Finance page, with the icons - the first 2 which are actually buttons, are not displaying the gradient that I’ve set to them with class and element css. I’m uploading screenshot to display both issues.

Thanks in advance.

#2

Hi @vlntnt,

Yes, I can see DIN font was set but it was not loaded. Would you mind sharing credentials inside a secure note so we can see your setup?

For AI in Finance page background issues, element background is taking precedence over the background you have set on the class. Try adding !important for the class background to work:

.bb {
    background: #b71524;
    background: -moz-linear-gradient(90deg,#b71524 0%,rgba(183,21,36,1) 100%) !important;
    background: -webkit-linear-gradient(90deg,#b71524 0%,rgba(183,21,36,1) 100%) !important;
    background: linear-gradient(90deg,#b71524 0%,rgba(183,21,36,1)) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b71524',endColorstr='#ffffff',GradientType=0 ) !important;
}

Hope this helps.

#3

Sure, thank you very much.

#4

I tried to add !important, however it’s not working : /

#5

Hi @vlntnt,

I can see the issue. There is no font set in it.

If it’s should be Bebas Neueu, please select it from the dropdown and click Save.

Hope this helps.

#6

I’ve uploaded the Din fonts though, they do show up on my side properly as you can see from the screenshot?

#7

Hi @vlntnt,

Currently, I didn’t see the font DIN on Font Manager. Would you mind sharing the font you have uploaded? Please upload it somewhere and share us the link so we can download and test it. It could be that you’re uploading a device font instead of web font, and you might need to convert it first.

#8

sure https://drive.google.com/drive/folders/1BREqM9kYmTTpE1PFtRNiThdbZyaGtdIm?usp=sharing

I’ve uploaded them as a .rar and separate files

#9

Hi @vlntnt,

I tried it first on my install and it works. So I tried to upload it again on your site and it works too.

Here is what I did exactly: https://screencast-o-matic.com/watch/cqhwlhT3Jj

Not sure what happened when you did it first. It works now.

Cheers!

#10

Thank’s a lot as always :slight_smile: Any other ideas regarding the gradient why it might not be working even with the !important in the code

#11

Hi @vlntnt,

You’re always welcome!

Regarding gradient, it is working. Please try to adjust the values so you can see it clearly. See this guide.

#12

In the builder it works but in the website, just shows the plain red:

#13

Hi There,

Can you please try replacing this code

(90deg,#b71524 0%,rgba(183,21,36,1) 100%) !important

With the following and see if that helps.
(45deg,#ffffff 0%,#650009 100%) !important

Let us know how it goes.

Thanks!

#14

I tried but it doesn’t :confused:

#15

Hi @vlntnt,

May I know what browser you’re testing it with? This is currently what I’m seeing outside the builder.

And it works okay, the color is thick too compared to your screenshots. I assume the browser is old and doesn’t fully support CSS Gradients.

Thanks!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.