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 guías de estilo de su marca añadiendo fuentes personalizadas de Google Fonts o fuentes auto-alojadas.

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, 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 (desde Thin hasta 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 Head Code que se detalla a continuación.

Añadir fuentes personalizadas mediante Head Code

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

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

Google Fonts:

  1. Visita Google Fonts

  2. Explora o busca la fuente que desees

  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 inserción <link> proporcionado

La imagen muestra la interfaz de 'Google Fonts' con un 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 bien definidos y la visibilidad del texto es buena gracias al alto contraste entre el texto blanco y el fondo oscuro. La barra lateral izquierda presenta una navegación primaria con iconos y etiquetas de texto que incluyen 'Fonts', 'Noto', 'Icons', 'Knowledge' y 'FAQ'. Debajo de estas se encuentran las secciones de 'Preview' y 'Filter'. La sección 'Preview' contiene un campo de entrada de texto llamado 'Type something' y un selector de tamaño de fuente, actualmente configurado en '40px', con un control deslizante correspondiente. La sección 'Filter' incluye categorías desplegables para 'Language', 'Writing system' y 'Feeling'. En 'Feeling', hay varios botones interactivos para filtrar estilos de fuente como 'Business', 'Fancy', 'Calm', 'Playful', 'Cute', 'Artistic', 'Vintage' y 'Loud'. En la esquina inferior izquierda, aparece la iconografía de sol/luna, que probablemente indique 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, el menú desplegable 'Sort by Trending' y un icono de bolsa de compra a la derecha. 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 bajo el 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 la disponibilidad de más tarjetas. El área de contenido principal indica '1899 de 1899 familias' y 'Acerca de estos resultados' con iconos de vista de cuadrícula y lista. La función principal de la página es mostrar varias familias de fuentes. Cada entrada muestra el nombre de la fuente (ej. 'Roboto', 'Noto Sans Syriac', 'Playwrite Česko'), su información de eje variable y el diseñador/fundición. Bajo los metadatos de cada fuente, se muestra una vista previa del texto de ejemplo.
La imagen muestra una página web de Google Fonts en tema oscuro, presentando la fuente 'Roboto'. La esquina superior izquierda cuenta con una barra lateral con iconos de navegación y etiquetas como 'Fonts', 'Noto', 'Icons', 'Knowledge' y 'FAQ'. Debajo de estos, hay un icono de sol, presumiblemente para alternar entre modo claro y oscuro. La barra de navegación superior incluye el logotipo de Google Fonts, una barra de búsqueda llamada 'Search fonts' y un icono de bolsa de compra a la derecha. Debajo de la navegación superior aparecen pestañas de 'Specimen' (activa), 'Type tester', 'About', 'License' y 'Glyphs & languages'. La sección principal resalta el nombre de la fuente 'Roboto' en una tipografía grande y negrita. Bajo el nombre se indica 'Diseñada por Christian Robertson, Paratype, Font Bureau', siendo estos nombres enlaces clicables. Una fila de etiquetas de color gris describe las características: '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 'Get font'. Sobre este botón hay una burbuja de información celeste que explica: 'Haz clic aquí para descargar esta fuente, obtener su código de inserción y descubrir cómo usarla en aplicaciones y productos.' Dentro de esta burbuja, 'Entendido' es un enlace. Una gran muestra de texto en Roboto dice: 'Whereas disregard and contempt for human rights have resulted'. Debajo, hay opciones para 'Seleccionar texto de vista previa:' con desplegables para 'Sistema de escritura' y 'Idioma'. Más abajo, se introduce una sección llamada 'Estilos'. Al final, 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. Explora las fuentes y añádelas a un proyecto web

  3. En la configuración de tu proyecto web, copia el código de inserció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 degradado de fondo rojo y azul dominante en la sección principal. La barra de navegación superior, sobre un fondo blanco, incluye...

Fuentes auto-alojadas:

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 obtener la mejor compatibilidad y 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 inserción al Head Code

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

  2. Abre el panel Advanced

  3. Localiza el editor Custom head code

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

  5. Haz clic en Save changes

El editor de código de cabecera personalizado en el panel Avanzado donde puedes pegar códigos de inserción de fuentes y CSS

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

Paso 3: Aplicar la fuente mediante CSS

Tras insertar 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> de tu declaración @font-face o en un bloque aparte.

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

Solución de problemas

Las fuentes no cargan:

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

  • Comprueba que las URL de las fuentes sean accesibles públicamente (CORS habilitado para fuentes auto-alojadas)

  • Asegúrate de que los nombres de las familias de fuentes en el 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 Head Code como alternativa

Error al guardar la configuración:

  • Busca 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 grosores que realmente utilices 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 visualicen correctamente en navegadores de escritorio y móviles

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

Recursos adicionales

¿Te fue util?