Ferndesk
Personalización

Añadir fuentes personalizadas a tu centro de ayuda

Personaliza la tipografía de tu centro de ayuda para que coincida con las pautas de tu marca añadiendo fuentes personalizadas de Google Fonts o de fuentes autoalojadas.

Uso del Selector de Tipografía (solo Google Fonts)

Para un acceso rápido a Google Fonts, utiliza el selector de tipografía integrado:

  1. Expande Help Center en la barra lateral y luego haz clic en Customize

  2. Abre el panel Branding

  3. Desplázate hasta la sección Typography

  4. Selecciona una familia de fuentes para Heading font o Body font

  5. Haz clic en Advanced Options para elegir grosores de fuente específicos (de Thin a Black)

  6. Haz clic en Save changes

El selector de tipografía solo es compatible con Google Fonts. Para Adobe Fonts, fuentes personalizadas o un mayor control sobre el estilo, utiliza el método de Head Code a continuación.

Añadir fuentes personalizadas a través de Head Code

Para fuentes que no sean de Google o personalizaciones avanzadas, inserta los códigos de incrustación de fuentes directamente en tu centro de ayuda:

Paso 1: Busca tu fuente y obtén el código de incrustación

Google Fonts:

  1. Visita Google Fonts

  2. Navega o busca la fuente deseada

  3. Haz clic en el nombre de la fuente para ver su página de detalles

  4. Haz clic en el botón Get font

  5. Copia el código de incrustación <link> proporcionado

La imagen muestra una interfaz de 'Google Fonts' con tema oscuro, dividida en tres secciones principales: una barra lateral izquierda, una barra de navegación/búsqueda superior con opciones de filtro adicionales y el área de contenido principal que muestra vistas previas de fuentes. Los elementos de la interfaz de usuario están generalmente bien definidos y la visibilidad del texto es buena debido al alto contraste entre el texto blanco y el fondo oscuro. La barra lateral izquierda presenta una navegación principal con iconos y etiquetas de texto que incluyen 'Fonts', 'Noto', 'Icons', 'Knowledge' y 'FAQ'. Debajo de estos se encuentran las secciones 'Preview' y 'Filter'. La sección 'Preview' contiene un campo de entrada de texto con la etiqueta 'Type something' y un selector de tamaño de fuente, actualmente establecido en '40px', con un control deslizante adjunto. La sección 'Filter' incluye categorías desplegables para 'Language', 'Writing system' y 'Feeling'. Bajo 'Feeling', hay varios botones interactivos para filtrar estilos de fuente como 'Business', 'Fancy', 'Calm', 'Playful', 'Cute', 'Artistic', 'Vintage' y 'Loud'. En la parte inferior izquierda hay una iconografía de sol/luna, que probablemente indica un conmutador de modo claro/oscuro. La barra superior muestra claramente la marca 'Google Fonts' a la izquierda, un campo de entrada 'Search fonts' con un icono de lupa en el centro, un menú desplegable 'Sort by Trending' y un icono de bolsa de la compra en el extremo derecho. Debajo de la barra de búsqueda, se ve un botón azul 'X Filters', que indica un filtro activo. A la derecha del campo de búsqueda y debajo del botón 'X Filters', una sección de desplazamiento horizontal presenta tarjetas con información como 'Readability', 'Material design guidelines', 'Optimize font loading' y 'Google Fonts API'. Un icono de flecha derecha sugiere que hay más tarjetas disponibles. El área de contenido principal indica '1899 of 1899 families' y 'About these results' con iconos de vista de cuadrícula y de lista. La función principal de la página es mostrar varias familias de fuentes. Cada entrada de fuente muestra el nombre de la fuente (p. ej., 'Roboto', 'Noto Sans Syriac', 'Playwrite Česko'), su información de eje variable y el diseñador/fundición. Debajo de los metadatos de cada fuente, se muestra una vista previa de texto de ejemplo.
La imagen muestra una página web de Google Fonts con tema oscuro, donde se presenta la fuente 'Roboto'. La esquina superior izquierda presenta una barra lateral con iconos de navegación y etiquetas de texto como 'Fonts', 'Noto', 'Icons', 'Knowledge' y 'FAQ'. Debajo de estos, hay un icono de sol, presumiblemente para alternar entre el modo claro y oscuro. La barra de navegación superior incluye el logotipo de Google Fonts, una barra de búsqueda con la etiqueta 'Search fonts' y un icono de bolsa de la compra en el extremo derecho. Debajo de la navegación superior se muestran de forma destacada las pestañas de 'Specimen' (actualmente activa), 'Type tester', 'About', 'License' y 'Glyphs & languages'. La sección principal destaca el nombre de la fuente 'Roboto' en un tipo de letra grande y en negrita. Debajo del nombre de la fuente, indica 'Designed by Christian Robertson, Paratype, Font Bureau', con estos nombres funcionando como enlaces clicables. Una fila de etiquetas grises tipo botón describe las características de la fuente: 'Sans Serif - Neo Grotesque', 'Technology - Variable', 'Feeling - Business', 'Feeling - Competent', 'Feeling - Calm' y 'Feeling - Stiff'. A la derecha del nombre de la fuente, se ve un botón azul con la etiqueta 'Get font'. Superpuesta a este botón hay una burbuja de información azul claro que explica: 'Haga clic aquí para descargar esta fuente, obtener su código de incrustación y descubrir cómo usarla en aplicaciones y productos'. Dentro de esta burbuja, 'Got it' es un enlace en el que se puede hacer clic. Una muestra de texto de gran tamaño en la fuente Roboto dice: 'Whereas disregard and contempt for human rights have resulted'. Debajo de esto, hay opciones para 'Select preview text:' con un desplegable para 'Writing system' y otro para 'Language'. Más abajo, se introduce una sección titulada 'Styles' en una fuente grande. En la parte inferior, hay un campo de entrada de texto, probablemente para que los usuarios escriban su propio texto de vista previa.

Ejemplo de Adobe Fonts:

  1. Visita Adobe Fonts e inicia sesión

  2. Navega por las fuentes y añádelas a un proyecto web

  3. En la configuración de tu proyecto web, copia el código de incrustación <link>

La captura de pantalla muestra la página de inicio de Adobe Fonts, caracterizada por un diseño limpio y moderno con un fondo degradado rojo y azul dominante en la sección principal. La barra de navegación superior, sobre un fondo blanco, presenta el

Fuentes autoalojadas:

Crea una regla @font-face que haga referencia a tus archivos de fuentes:

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('https://yoursite.com/fonts/customfont.woff2') format('woff2'),
       url('https://yoursite.com/fonts/customfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
</style>

Utiliza los formatos WOFF2 y WOFF para mejorar la compatibilidad y el rendimiento del navegador. Aloja los archivos de fuentes en una CDN fiable o en tu propio servidor.

Paso 2: Añade el código de incrustación al Head Code

  1. Expande Help Center en la barra lateral y luego haz clic en Customize

  2. Abre el panel Advanced

  3. Localiza el editor Custom head code

  4. Pega el código de incrustación de tu fuente (la etiqueta <link> o el bloque <style> del Paso 1)

  5. Haz clic en Save changes

El editor Custom head code en el panel Advanced donde puedes pegar los códigos de incrustación de fuentes y CSS

El editor de Head Code no valida la sintaxis antes de guardar. Prueba tu código con cuidado para evitar romper el estilo de tu centro de ayuda.

Paso 3: Aplica la fuente a través de CSS

Después de incrustar la fuente, añade reglas CSS para aplicarla a elementos específicos:

<style>
/* Apply custom font to all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Your Font Name', sans-serif;
}

/* Apply custom font to body text */
body, p {
  font-family: 'Your Font Name', serif;
}
</style>

Añade este CSS en el mismo editor Custom head code, ya sea dentro del mismo bloque <style> que tu declaración @font-face o en un bloque separado.

Los cambios surten efecto inmediatamente después de guardar. Visita tu centro de ayuda en vivo para confirmar que las fuentes se visualizan correctamente.

Resolución de problemas

Las fuentes no se cargan:

  • Verifica que la sintaxis del código de incrustación sea correcta (que no falten comillas ni corchetes)

  • Comprueba que las URL de las fuentes sean accesibles públicamente (con CORS habilitado para fuentes autoalojadas)

  • Asegúrate de que los nombres de las familias de fuentes en CSS coincidan exactamente (distingue entre mayúsculas y minúsculas)

El selector de tipografía muestra "Unable to load fonts":

  • Actualiza la página e inténtalo de nuevo

  • Utiliza el método de Head Code como alternativa

Fallo en la configuración de guardado:

  • Comprueba si hay errores de sintaxis en tu Head Code

  • Elimina el código añadido recientemente e intenta guardar de nuevo para aislar el problema

Mejores prácticas

  • Limita los grosores de fuente: Carga solo los pesos de fuente que utilices realmente para mejorar la velocidad de carga de la página

  • Usa font-display: Añade font-display: swap; para evitar el texto invisible durante la carga de la fuente

  • Prueba en varios dispositivos: Verifica que las fuentes se representen correctamente en navegadores de escritorio y móviles

  • Proporciona fuentes de respaldo: Especifica siempre alternativas genéricas (p. ej., sans-serif, serif) en tus declaraciones de font-family

Recursos adicionales

¿Te fue útil?