Jump to content

7.1 custom fonts for embedded Zoho form

Recommended Posts

Site URL: https://www.inneco.de/eco-basic-eco-premium


I am trying to change the font family of my embedded Zoho form to "Futura" or "Futura PT" (if possible), the font family I am using on my website.
It is not possible to choose this font in Zoho Forms.

I tried this code:


 .tempHeadContBdr .frmTitle {
    font-family: 'futura';
    font-size: 33px;
    color: #030303;
    font-style: normal;
    font-weight: 500;
    font-weight: 5; 

But nothing happens.

When I change the code in the "inspect" mode, the font changes. So it should be possible in the CSS section as well.

Bildschirmfoto 2020-12-15 um 21.54.31.png

Link to comment
  • Replies 1
  • Views 549
  • Created
  • Last Reply

Okay, I found out on stackoverflow that it is not possible.

For anyone who faces the sam problem:

The iframe embed is self-contained, so the CSS from your Squarespace site isn’t going to be applied.

Ideally, what you’d be able to do is add custom CSS to your form provider as well, but unfortunately it looks like Zoho doesn’t support this. There are a lot of questions about it on their support forum, ex: https://help.zoho.com/portal/en/community/topic/how-do-i-change-a-zoho-creator-form-s-styling-with-css

You could choose to download the HTML & CSS from the form: https://www.zoho.com/forms/help/share/embed.html#download-html

That could be added into a Squarespace HTML block—but then you’d presumably be losing a lot of the reasons you’d be using a hosted form service in the first place (ex. if you updated your form fields, they wouldn’t be getting updated in your HTML anymore).

When you are using the inspector, when you change the styles, you are styling within this iframe. In practice, you can’t do that via your Squarespace site. It’s the same idea as this question: How to apply CSS to iframe?

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.