Configurar fuentes personalizadas para usarlas en una aplicación Jitterbit App Builder

Este artículo te explica cómo configurar fuentes personalizadas para usarlas en una aplicación de App Builder. Si quieres usar un tipo de fuente específico que no está disponible en Google Fonts, App Builder permite trabajar con un tipo de fuente personalizado.

Consulta Configurar fuentes de Google para usarlas en App Builder artículo para obtener información sobre la configuración de Google Fonts.

Caso de uso

Las empresas suelen tener un tipo de fuente específico declarado en sus directrices de marca, y es posible que esa fuente no esté disponible en Google Fonts. En este caso, App Builder permite cargar los archivos de fuente como parte de un widget y referenciarlos en un archivo CSS mediante @font-face Funcionalidad.

Configurar fuentes personalizadas

1. Siga los pasos descritos en el Cargador de CSS artículo para recuperar la carpeta CSS Loader.zip
2. Extraiga el contenido de la carpeta .zip

3. Copie los archivos de fuentes personalizados que usará para su aplicación App Builder en el directorio superior de CSS Loader

   • Por ejemplo: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf

4. Utilice un programa editor de código, como Visual Studio Code, para abrir el styles.css archivo para editar

5. Configure la siguiente información en el styles.css archivo para especificar información para la fuente personalizada deseada utilizando el @font-face Regla:

   • El grosor de fuente regular debe especificarse primero en el archivo style.css. Vea el ejemplo de sintaxis a continuación.

   • Los valores de grosor de fuente deben estar en formato numérico (p. ej., 300, 400, 500, 600, etc.). Usar los valores "lighter", "normal", "negrita" y "bolder" no funcionará con grosores múltiples.

   • Los valores de grosor de fuente (p. ej., 300, 400, 500, 600, etc.) que configure para cada archivo de fuente serán los mismos que usará en Temas para cambiar el grosor y solo pueden existir una vez por grosor (p. ej., no puede tener dos archivos de fuente configurados con el mismo valor de grosor de fuente).

   Ejemplo de sintaxis de Styles.css

   /* Suisse Font */
   
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Regular.otf") format("opentype");
       font-weight: 400;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Bold.otf") format("opentype");
       font-weight: 600;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-SemiBold.otf") format("opentype");
       font-weight: 500;
       font-style: normal;
   }
   @font-face {
       font-family: "SuisseIntl";
       src: url("SuisseIntl-Light.otf") format("opentype");
       font-weight: 300;
       font-style: normal;
   }
   

6. Guarde todos los cambios en styles.css Archivo

7. Siga los pasos descritos en CSS Loader para subir el widget CSS Loader a una colección que usa tu aplicación.
8. Sigue los pasos descritos para añadir el CSS Loader como widget del sitio.

9. Por último, debes configurar el tema de tu aplicación para especificar la fuente personalizada.

   • Navega hasta el tema de tu aplicación.
   • Agrega un estilo orientado al área del sitio, selecciona "Fuente" como tipo de estilo y establece el valor del nombre con el nombre de la fuente personalizada. Por ejemplo: "SuisseIntl".