Configurar Fuentes Personalizadas para Usar en an App Builder aplicación¶

Este artículo le muestra cómo configurar fuentes personalizadas para usarlas en an App Builder aplicación. En el caso de que desee utilizar un tipo de fuente específico que no está disponible a través de Google Fonts, App Builder admite la posibilidad de trabajar con un tipo de fuente personalizado.

Consulta Configurar fuentes de Google para usarlas en App Builder artículo para obtener información sobre cómo configurar las fuentes de Google.

Caso de Uso¶

Las empresas suelen tener un tipo de fuente específico declarado como parte de sus pautas de marca, y es posible que esa fuente no esté disponible en Google Fonts. En este caso, App Builder admite la capacidad de cargar los archivos de fuentes como parte de un widget y hacer referencia a ellos en un archivo CSS usando el @font-face funcionalidad.

Configurar Fuentes Personalizadas¶

Siga los pasos que se describen en CSS Loader artículo para recuperar la carpeta CSS Loader.zip
Extraiga el contenido de la carpeta .zip
Copie los archivos de fuentes personalizados que usará para su App Builder aplicación en el directorio superior de CSS Loader
- Por ejemplo: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf
Utilice un programa de edición de código, como Visual Studio Code, para abrir la aplicación styles.css archivo para editar
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 dentro del archivo styles.css. Vea la sintaxis de ejemplo a continuación.
- Los valores de grosor de fuente deben estar en formato numérico (p. ej., 300, 400, 500, 600, etc.). El uso de los valores más claros, normales, negritas y más negritas no funcionará para 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 valores de grosor de fuente que utilice en Temas para cambiar el grosor y solo pueden existir una vez por grosor (p. ej., no puede tener 2 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;
}
```
Guarde todos los cambios en el styles.css archivo
Siga los pasos que se describen en CSS Loader para cargar el widget CSS Loader en una colección que esté usando tu aplicación
Sigue los pasos que se describen para agregar el CSS Loader como un widget de sitio
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 de Nombre en el nombre de la fuente personalizada. Por ejemplo: "SuisseIntl"