Configurar Google Fonts para Su Uso en App Builder¶
Esta guía le mostrará cómo usar las fuentes de Google en an App Builder aplicación. Si desea especificar diferentes pesos para las fuentes de Google que utilizará su aplicación, es posible que se requiera una configuración adicional para lograr el resultado deseado. Para aprovechar los diferentes pesos de las fuentes de Google de App Builder debe actualizar el código de importación para incluir un "0" antes de cada peso especificado en la sintaxis de la API de Google al configurar los parámetros del widget del sitio.
Hay dos áreas principales que se deben configurar. La primera implica configurar un widget del sitio. Una vez configurado, deberá modificar el tema de su aplicación para aprovechar la fuente seleccionada a través de la interfaz de usuario/experiencia de usuario de la capa de aplicación.
Configurar un Widget del Sitio para Conectarse a Google Fonts¶
- Vaya a IDE > Configuración adicional
- Haga clic en Widgets del sitio
- Haga clic en + Registro de widgets en Widgets del sitio
- Haga clic en el menú desplegable de la columna Widget y seleccione Web Font Loader
- Haga clic en el icono de marca de verificación para guardar
- Haga clic en + Parámetro en Parámetros del widget del sitio
- Seleccione WebFontName como valor del parámetro
-
Ingrese la información de la API de Google Font para la fuente de Google nombrada que desea utilizar en el campo Valor. En este paso, debe modificar la sintaxis de la API de Google proporcionada para incluir una
0,antes de los pesos especificados. Por ejemplo:- Sintaxis de Google Font:
Lato:wght@100;300;400;700&display=swap" - Sintaxis modificada para ingresar en el campo Valor:
Lato:wght@0,100;300;400;700&display=swap"
- Sintaxis de Google Font:
-
Haga clic en Guardar
Ejemplo de widget Web Font Loader para especificar Google Font
Modifique Su Tema para Especificar el Valor de la Fuente¶
- Vaya a App Workbench > Look & Feel
- Busque la colección de temas de su aplicación y haga clic en el tema correspondiente
- Haga clic en el ícono Abrir registro del tema para expandir la información del tema
- Seleccione el componente Página y haga clic en + Estilo en Estilos
- Seleccione el contenedor Página como Área
- Seleccione Fuente como Tipo de estilo
- Seleccione Todos los estados como Estado
- Especifique la información de la familia de fuentes Valor 1 para proporcionar información sobre la fuente de Google que desea utilizar. Por ejemplo: Lato, sans-serif
- Ingrese una descripción de Ayuda técnica
- Haga clic en + Estilo en Estilos
- Seleccione el Sitio contenedor como Área
- Seleccione Fuente como Tipo de estilo
- Especifique la Familia de fuentes Valor 1 para que coincida con el paso 8. Por ejemplo: Lato, sans-serif
- Haga clic en Guardar
Ejemplo de estilos configurados para especificar el tipo de fuente de Google
Después de completar los pasos descritos anteriormente, verifique que su tema esté asociado con su aplicación. Si es así, ahora puede navegar para ver su aplicación, actualizar el navegador web y ver la nueva fuente.