Cómo utilizar las tipografías de Google y tipografías personalizadas en Jotform

7 de diciembre de 2023

 Además de las fuentes integradas, Jotform también es compatible con las reglas de CSS como @import y @font-face. Podrá utilizarlos para aplicar fuentes personalizadas desde Google Fonts o desde vuestro servidor a los formularios.

Youtube Embed Poster: o5j8JpMwbCA

Obtener el código para importar tipografías de Google

Para generar vuestros códigos CSS

  1. Abrid Tipografías de Google, y buscad la tipografía.
  2. Escoged la tipografía a través de los resultados.
Steps to search and select a font in Google Fonts
  1. Deslizad hacia abajo a la sección de los estilos y escoged aquellos que os gustaría utilizar.
An arrow pointing to the "regular" font style in Google Fonts
  1. Seleccionad el icono de cuadrícula en la parte superior de la esquina derecha para abrir el panel de la familia seleccionada.
  2. En el panel de la familia seleccionada a la derecha, selecciona @importar bajo Utilizar en la web.
  3. Copiar el código dentro del tag de estilo.
A screenshot of Google Fonts with highlights to access the import code in the Selected family pane

Además, tomad nota de la declaración de la familia de fuentes bajo las reglas de CSS para especificar familias. Siga leyendo para aprender cómo importar la fuente a su formulario.

Importar las tipografías de Google a vuestro formulario

Para utilizar las fuentes en vuestro formulario

  1. En el Creador de Formularios, seleccionad el icono de la brocha en la parte superior derecha para abrir el diseñador de formularios. 
Cómo utilizar las tipografías de Google y tipografías personalizadas en Jotform Image-1
  1. En el diseñador de formularios a la derecha, id a Estilos en la parte superior.
Cómo utilizar las tipografías de Google y tipografías personalizadas en Jotform Image-2
  1. Deslizad hacia abajo para inyectar un CSS personalizado y pegar vuestro código de importación de fuentes de Google en la línea 1.
Cómo utilizar las tipografías de Google y tipografías personalizadas en Jotform Image-3

Nota

La regla @import debe haber sido declarada antes de cualquier otra norma. Aseguraros de pegar el código de importación encima de todos los códigos CSS que debáis tener.

  1. Lo siguiente, es copiar el código a continuación, después de la regla de importación:  
* {
font-family: 'MyWebFont', sans-serif;
}
  1. Reemplazad la declaración de la familia de la tipografía con una de las fuentes de Google bajo las normas CSS para especificar las familias.
An arrow pointing to the font-family CSS rule in Google Fonts

El código completo parecerá algo parecido al siguiente:

@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
* {
font-family: 'Charm', cursive;
}
  1. Revisad vuestro formulario en Vista Previa o modo en vivo para ver los cambios.

Utilizar las fuentes personalizadas alojadas en vuestro servidor

La norma CSS @font-face CSS permite cargar vuestras fuentes a partir del servidor y aplicarlas a vuestros formularios.

Nota

Vuestro servidor necesitará admitir HTTPS y uso compartido de recursos de origen cruzado (CORS). Visitad y habilitad CORS para obtener más información.

Para utilizar tipografías desde vuestro servidor

  1. Subid vuestros archivos de tipografías a vuestro servidor vía FTP o cPanel.
  2. Copiad el siguiente código CSS:
@font-face {
font-family: 'MyAwesomeWebFont';
src: url('https://example.com/webfont.woff') format('woff'),
url('https://example.com/webfont.ttf') format('truetype');
}
* {
font-family: 'MyAwesomeWebFont', sans-serif;
}
  1.  Insertad el código en vuestro formulario.
  2. Reemplazadlo con los valores src en el código con vuestro URL de la tipografía y formato.

Para el código CSS, podéis utilizar cualquier herramienta generadora de tipos de letra disponible en línea para compatibilidad con navegadores.

Contacte a atención al cliente:

Nuestro equipo de atención al cliente está disponible 24/7 y nuestro tiempo de respuesta promedio es entre una y dos horas.
Nuestro equipo puede ser contactado vía:

Foro de ayuda: https://www.jotform.com/answers/

Contacto a Soporte de Jotform: https://www.jotform.com/contact/

Enviar Comentario:

Jotform Avatar
Este sitio está protegido por reCAPTCHA y lo rigen la Política de privacidad de Google y los Términos de servicio.

Podo Comment Sea el primero en comentar.