Fuentes personalizadas
Descubra cómo personalizar aún más sus experiencias Appcues aprovechando fuentes personalizadas.
Se puede personalizar aún más la experiencia Appcues utilizando fuentes personalizadas. Estas se pueden implementar añadiéndolas a través de la página Estilos de Appcues Studio con una de las siguientes opciones:
Fuentes de Google
Paso 1
Accede a la página de Fuentes de Google y selecciona las fuentes que quieres incluir en tu tema Appcues . Primero, accede a la página de la fuente. Luego, haz clic en "Ver familias seleccionadas" en la esquina superior derecha de la pantalla.
Paso 2
Abra las 'Familias seleccionadas' y copie la URL proporcionada. (No es necesario incluir &display=swap)
Paso 3
Abre la ventana del Administrador de fuentes en tu tema Appcues haciendo clic en "Fuente del encabezado" o "Fuente del cuerpo" y selecciona "Añadir fuente de Google". Debajo de la etiqueta "URL de la fuente", verás un campo de entrada. Pega aquí la URL que copiaste y pulsa el botón "Guardar".
Paso 4
En los menús desplegables "Fuente del encabezado" y "Fuente del cuerpo", podrás seleccionar las fuentes que hayas añadido con Google Fonts. Asegúrate de hacer clic en el botón "Guardar" en la esquina superior derecha para que la configuración de tu tema se configure con tus fuentes personalizadas. (Nota: Si guardas un tema sin seleccionar una de las fuentes de Google en ninguno de los menús desplegables, esta se eliminará de tus estilos para mejorar el rendimiento y el tiempo de carga).
Fuentes de Adobe
Paso 1
En su cuenta de fuentes de Adobe, en la pestaña Proyectos web , copie el ID del proyecto de fuentes que desea utilizar.
Paso 2
Abra la ventana del Administrador de fuentes en su tema Appcues haciendo clic en "Fuente de encabezado" o "Fuente de cuerpo" y seleccionando "Agregar fuente de Adobe". En la modal emergente, encontrará un campo para pegar el ID de su proyecto. Pegue aquí el ID de proyecto copiado y presione el botón "Guardar".
Paso 3
Una vez que hayas hecho eso, sigue las instrucciones de este documento de Adobe para integrar tu proyecto web en la sección CSS personalizada de tu tema Appcues .
- Primero copie el enlace @import de su proyecto, dejando fuera las etiquetas de estilo en cada extremo.
- Pegue esto en la parte superior de la sección CSS personalizada de su tema.
- Ahora puedes asignar las familias de fuentes incluidas en el proyecto web al contenido Appcues usando nuestro editor CSS .
Dado que simplemente proporcionar el ID del proyecto web hará que el tema intente usar el ID como familia de fuentes, asegúrese de comenzar con los siguientes selectores para asegurarse de proporcionar una fuente de respaldo específica para todo el contenido Appcues :
body h1, body h2, body h3, body h4, body h5, appcues cue h1, appcues cue h2, appcues cue h3, appcues cue h4, appcues cue h5, .tooltip .content h1, .tooltip .content h2, .tooltip .content h3, .tooltip .content h4, .tooltip .content h5, * {
font-family: filicudi-color-wasp, sans-serif;
}CSS personalizado
El editor CSS es un recurso valioso para importar fuentes de fuentes propias o de terceros, o para aplicarlas a elementos específicos en tus flujos Appcues . Esta sección te guiará en el proceso de importación y aplicación de una fuente personalizada.
Paso 1
Seleccione la pestaña CSS después de seleccionar un tema para editar en la página de temas .
Paso 2
Crea una declaración de importación en tu CSS personalizado que enlace a la fuente que elijas. Por ejemplo, si quisieras importar una fuente desde un bucket S3 autoalojado, podrías hacerlo así.
@import url(https://s3-us-west-2.amazonaws.com/appcues-custom-fonts/raleway.css);Alternativamente, puede importar un archivo de fuente directamente usando @font-face.
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 800; src: local('Raleway Black'), local('Raleway-Black'), url(https://s3-us-west-2.amazonaws.com/appcues-custom-fonts/Raleway-Black.ttf) format('ttf'); }Paso 3
Especifique los elementos a los que desea aplicar la nueva fuente. Para ello, especifique el nombre que le asignó ('Raleway' arriba) como la familia de fuentes de los elementos en su CSS personalizado. Puede aplicar la fuente solo a las fuentes del encabezado, como se muestra a continuación. Debería poder ver su fuente en uso en la sección "Vista previa interactiva". Es posible que deba incluir una declaración ! importante para garantizar que esta regla de fuente tenga prioridad.
Si quisiéramos aplicar la fuente a todos los elementos (tanto las fuentes de encabezado como las de cuerpo) en sus flujos Appcues , podría hacerlo utilizando el selector *.
@import url(https://s3-us-west-2.amazonaws.com/appcues-custom-fonts/raleway.css);
* { font-family: 'Raleway', futura, sans-serif; }Fuentes personalizadas en el Constructor
Las fuentes personalizadas aparecerán como un valor en blanco en el Constructor, como es de esperar. Para volver a cambiar la fuente de un texto a la fuente personalizada, agregue un nuevo bloque de texto y la fuente se aplicará por defecto.
Carga de fuentes personalizadas para listas de verificación
Se pueden cargar fuentes personalizadas en checklists configurando la Familia de fuentes como Personalizada al editar la checklist . El siguiente video muestra cómo usar una fuente personalizada en una Lista de verificación Appcues para que se adapte perfectamente al estilo de su aplicación.
Paso 1
Establezca la familia de fuentes en Personalizada al editar la checklist :
Paso 2
Ingrese la URL de la fuente personalizada y agregue el CSS de la fuente personalizada:
Estos nuevos campos se utilizarán para agregar el CSS que la checklist utilizará para mostrar su nueva fuente ("CSS de fuente personalizada") y la URL donde está alojada su fuente personalizada ("URL de fuente personalizada").
Empieza añadiendo el CSS que la checklist usará para mostrar tu fuente. En este campo, simplemente añade el valor que normalmente iría después de la propiedad font-family en el CSS de tu aplicación web. Por ejemplo, en este caso, intentamos añadir la fuente "Homemade Apple" de Google Fonts para nuestro sitio web hermano, Napcues, donde los familiares pueden publicar avisos para avisarles cuándo despertarlos de la siesta.
El CSS para utilizar esta fuente en nuestra aplicación normalmente se vería así:
familia de fuentes: 'Homemade Apple', cursiva;
¡No te intimides! La primera parte es solo la parte de nuestra regla CSS que indica al navegador que queremos cambiar la familia de fuentes que usamos para la checklist y la parte después de los dos puntos le indica qué familias de fuentes usar.
Tenga en cuenta que, para este ejemplo, tenemos nuestra fantástica fuente "Homemade Apple" y, a continuación, especificamos "cursive". "cursive" es una fuente de respaldo en caso de que nuestra fuente de Google no cargue. No es necesario incluir una fuente de respaldo, pero suele ser una buena manera de garantizar que todos sus usuarios tengan una buena experiencia.
Si usas Google Fonts, el sitio es muy útil y te indicará qué escribir para este CSS. Simplemente añade una fuente al sitio, haz clic en el recuadro "Familia seleccionada" y te aparecerá una ventana desplegable con mucha información útil similar a esta:
Una vez que hayas decidido qué CSS usar, puedes escribirlo en "CSS de fuente personalizada". Tu editor debería verse así:
Al añadir la regla CSS, puedes dejar o quitar el punto y coma al final. Cualquiera de las dos opciones funcionará.
No te preocupes si tu checklist aún no muestra tu fuente personalizada. Necesita saber dónde obtenerla en internet. Esta es la URL donde está alojada tu fuente. Si no estás seguro de cuál es esta URL, normalmente estará en tu aplicación web como una etiqueta <link>.
Si usas Google Fonts, este es otro lugar donde la útil ventana desplegable mencionada anteriormente te será de gran ayuda. Puedes consultar el href de la etiqueta <link> y copiar y pegar la URL en el cuadro "URL de fuente personalizada".
¡En este punto, tu checklist debería mostrar tu fuente personalizada!
Problemas comunes
Si tu fuente aún no se muestra de la forma correcta, hay un par de cosas que debes tener en cuenta.
- Asegúrese de que la URL realmente muestre su fuente
- La URL que introduces en el campo "URL de fuente personalizada" debe enviar tu fuente. Debería enviar algo similar a un código. Si pegas la URL en tu navegador y obtienes algo similar a un sitio web normal, es probable que no tengas el enlace correcto al sitio donde está alojada la fuente.
- Asegúrese de que su CSS de fuente personalizada no tenga la parte font-family de la regla
- ¡Nos encargamos de la familia de fuentes ! La checklist solo necesita el nombre de tu fuente y una fuente de respaldo si usas una para mostrar las cosas correctamente. No escribes la regla CSS completa, solo nos das la parte que va después de la familia de fuentes.
- Tienes un error tipográfico en el CSS o la URL
- Si aún no se muestra, revisa y asegúrate de que no haya ningún error tipográfico en el CSS o la URL que nos proporcionaste. No te preocupes, ¡nos pasa a todos!
¿Necesitas ayuda para importar las fuentes que deseas? Escríbenos a support@appcues.com y con gusto te ayudaremos.