¿Cómo cambiar fuente-familia de forma zoho incrustada en Squarespace a través de css?

Quiero cambiar la fuente-familia de mi forma incrustada (via iframe) Zoho a futura o futura pt. Estoy usando Squarespace, así que css personalizado es posible.

Esta es la URL de mi sitio web: suprimido

Intenté este código. No pasa nada.



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

En el "modo de inspección" puedo cambiar la fuente-familia. forma incrustada

¡Espero que me ayudes con este tema!

enmienda siguiente: @Sagar Gaikwad: Así es como un intento de añadir los parámetros de estilo: code block in SquareSpace

Pregunta hecha hace 3 años, 4 meses, 29 días - Por devdynamo

4 Respuestas:

  • El iframe embed es autocontenido, por lo que el CSS de su sitio Squarespace no va a ser aplicado.

    Idealmente, lo que podría hacer es añadir CSS personalizado a su proveedor de formularios también, pero por desgracia parece que Zoho no soporta esto. Hay muchas preguntas sobre ello en su foro de apoyo, ex: https://help.zoho.com/portal/en/community/topic/how-do-i-change-a-zoho-creator-form-s-styling-with-css

    Usted podría elegir descargar el HTML & CSS del formulario: https://www.zoho.com/forms/help/share/embed.html#download-html

    Eso podría agregarse en un bloque HTML de Squarespace, pero entonces usted probablemente estaría perdiendo muchas de las razones por las que usted estaría utilizando un servicio de formulario hospedado en el primer lugar (ex. si usted actualiza sus campos de formularios, ellos ya no se actualizarían en su HTML).

    Cuando estás usando el inspector, cuando cambias los estilos, estás estilizando dentro de este iframe. En la práctica, no se puede hacer eso a través de su sitio Squarespace. Es la misma idea que esta pregunta: ¿Cómo aplicar CSS a iframe?

    Respondida el Dec 16, 2020 a las 23:57 - por byteninja

    Votos positivos: 0 | Votos negativos: 0

  • Pasando el parámetro de url: https://www.zoho.com/creator/help/url-pattern/style-based-urls-for-embedded-forms.html#6._View_Customization

    o

    utilizado google font

    Respondida el Dec 17, 2020 a las 00:04 - por quantumquasar

    Votos positivos: 0 | Votos negativos: 0

  • Para cambiar la fuente-familia de un formulario incrustado de Zoho en Squarespace, debes asegurarte de que estás apuntando al elemento correcto dentro del iframe. Dado que estás utilizando un iframe, es posible que necesites aplicar el CSS directamente al contenido del iframe. Aquí te dejo un ejemplo de cómo podrías intentar cambiar la fuente-familia:

    css
/ Estilo para el iframe /
iframe {
    width: 100%;
    height: 500px; / ajusta la altura según sea necesario /
}

/ Estilo para el contenido dentro del iframe /
iframe {
    font-family: 'futura', sans-serif !important;
    font-size: 16px; / Tamaño de fuente deseado /
    color: 030303; / Color de fuente deseado /    font-style: normal;
    font-weight: 500;
}

    Asegúrate de que estás apuntando al elemento correcto dentro del iframe donde se encuentra tu forma incrustada. Puedes utilizar las herramientas de inspección del navegador para verificar el nombre de las clases y los estilos aplicados. Recuerda que, debido a las restricciones de seguridad del navegador, es posible que algunos estilos no se apliquen correctamente si el contenido del iframe proviene de un dominio externo.

    Espero que esta información te ayude a personalizar la fuente de tu formulario incrustado. ¡Déjame saber si tienes más preguntas!

    Respondida el Dec 17, 2020 a las 23:53 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución para cambiar la fuente-familia de la forma Zoho incrustada en Squarespace:

    • Habilitar el Código Personalizado:
    - Ve a Configuración > Avanzado > Código Inyectable
    • Habilita Código de encabezado
    • Añade el siguiente código CSS personalizado:
    css
iframe[id^="zoho-"] .frmTitle {
  font-family: "Futura-PT", sans-serif; / Reemplaza "Futura-PT" con el nombre de tu fuente deseada /
}

    Explicación:

    El selector iframe[id^="zoho-"] selecciona todos los iframes cuyo ID comienza con "zoho-", que es el caso de las formas incrustadas de Zoho. El selector .frmTitle selecciona el título de la forma. La propiedad font-family establece la fuente del título de la forma a "Futura-PT" o el nombre de fuente que desees.

    Alternativa:

    Si el método anterior no funciona, puedes intentar lo siguiente:

    • Inspecciona la forma incrustada:
    - Haz clic con el botón derecho en el título de la forma y selecciona "Inspeccionar".
    • Busca el elemento HTML:
    - Busca el elemento HTML correspondiente al título de la forma. Suele ser un elemento <div> o <span> con una clase que contenga "frmTitle".
    • Añade el atributo style:
    - En el panel de "Estilos" del inspector, añade el siguiente atributo style al elemento HTML: 
    
   style="font-family: 'Futura-PT', sans-serif;"

    Nota:

    Asegúrate de reemplazar "Futura-PT" con el nombre de la fuente que deseas usar. * Debes tener acceso para editar el código CSS de tu sitio web de Squarespace.

    Respondida el Dec 18, 2020 a las 00:08 - por Gemini

    Votos positivos: 0 | Votos negativos: 0