Styling an embedded calculator (Calconic.com) with Webflow custom code

So I’m having a hard time figuring out how to style an embedded calculator from Calconic to display the same font as the rest of the page which is Circular.

I’ve added the code snippet provided by Calconic into an Embed element block on the page I would like the to display the caclulator:


Then i headed over to the Project settings → Custom code and added the following code to the Head Code:

.calconic-calculator {
font-family: Circular, sans-serif !important;
color: #000 !important;
font-size: 16px !important;
line-height: 1.4 !important;
}

By selecting the .calconic-calculatorclass I was hoping to change the font to Circular. By the calculator is still displaying Montserrat from the Calconic style.

Interestingly enough is that the Chorme extension What font? detects Circular when clicking elsewhere that the actual text inside the calculator boundaries.

My question is: How can I apply any style changes to the calculator?

I’ve also tried to add the CSS custom code to the both the Embed element block and to the Page settings custom code section, without any luck.

So please, If you have any ideas to how to solve this, I’dd be happy to try them out :slight_smile:


Here is my site Read-Only: Calconic-calculator

More specific CSS rules are controlling the font display. These are in the many style blocks the script injects into the page. You should consult the providers documentation on whether overrides are possible and how. You could try to copy the rules (modified) and place them in an embed on the page. Use your browser devtools to inspect the page so you can see the computed styles.

I’ve reached out to Calconic support and they say:

Everything about the calculator’s style can be edited once it is embedded using the Standard or Lightbox via your webpage’s CSS.

I’m using the Standard script.

I’ve also addressed the question of which class to select and the answer from Calconic then is:

Since we cannot guarantee the quality of our service when CSS is edited, we do not provide assistance with it.

I’m not sure I quite follow what you are suggesting I should try, Jeff.
Should I copy the rules and place them in an embed on the page like this?

And then open the page in devtools like this?

If that’s right, what next?

Sorry for being such a noob :roll_eyes:


Here is my site Read-Only: Calconic-calculator

1 Like

The amount of dead-end threads in this forum is depressing.

@Bastian - Make sure to @ message a user you are responding to since that notifies them. Without that it’s very hard to keep track of threads where users need assistance.

I was going to circle back since I just saw the topic again and tried your read-only which is no longer valid. Did you resolve this issue?

@webdev Thanks for the @mentioning tip :+1:

Unfortunately I haven’t resolved the issue. If you want to take another look. Here’s the read only-link:
https://preview.webflow.com/preview/gramo-no?utm_medium=preview_link&utm_source=designer&utm_content=gramo-no&preview=6922e701b1cc55d8a789dcbc397ba31f&pageId=60743c5803881b715a7fc13b&mode=preview