Ferndesk
Personalización

Añadir fuentes personalizadas al centro de ayuda

Personaliza la tipografía de tu centro de ayuda para que coincida con las directrices de tu marca añadiendo fuentes personalizadas de Google Fonts o de fuentes alojadas en tu propio servidor.

Uso del selector de tipografía (solo Google Fonts)

Para acceder rápidamente a Google Fonts, utiliza el selector de tipografía integrado:

  1. Expande Centro de ayuda en la barra lateral y haz clic en Personalizar

  2. Abre el panel Branding

  3. Desplázate hasta la sección Tipografía

  4. Selecciona una familia tipográfica para Fuente de encabezado o Fuente del cuerpo

  5. Haz clic en Opciones avanzadas para elegir pesos de fuente específicos (de Thin a Black)

  6. Haz clic en Guardar cambios

El selector de tipografía solo admite Google Fonts. Para Adobe Fonts, fuentes personalizadas o un mayor control sobre los estilos, utiliza el método Head Code que se describe a continuación.

Añadir fuentes personalizadas mediante Head Code

Para fuentes que no sean de Google o para una personalización avanzada, inserta directamente códigos de incrustación de fuentes en tu centro de ayuda:

El código de cabecera personalizado no está disponible durante el periodo de prueba. Cambia a un plan de pago para utilizar este método.

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

Google Fonts:

  1. Visita Google Fonts

  2. Explora o busca la fuente que quieras

  3. Haz clic en el nombre de la fuente para abrir 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 un tema oscuro, dividida en tres secciones principales: una barra lateral izquierda, una barra superior de navegación y búsqueda con opciones de filtrado adicionales, y el área de contenido principal, que muestra vistas previas de fuentes. Los elementos de la interfaz están, en general, bien definidos, y el texto se ve claramente gracias 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 como 'Fonts', 'Noto', 'Icons', 'Knowledge' y 'FAQ'. Debajo 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, establecido actualmente en '40px', con un control deslizante. La sección 'Filter' incluye categorías plegables 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 parte inferior izquierda aparece una iconografía de sol/luna, probablemente para indicar un interruptor 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 compra en el extremo derecho. Debajo de la barra de búsqueda se ve un botón azul 'X Filters', que indica que hay un filtro activo. A la derecha del campo de búsqueda y debajo del botón 'X Filters', una sección horizontal desplazable presenta tarjetas con información como 'Readability', 'Material design guidelines', 'Optimize font loading' y 'Google Fonts API'. Un icono de flecha hacia la derecha sugiere que hay más tarjetas disponibles. El área de contenido principal indica '1899 of 1899 families' y 'About these results', junto con iconos para las vistas de cuadrícula y lista. La función principal de la página es mostrar distintas familias tipográficas. Cada entrada de fuente muestra el nombre de la fuente (por ejemplo, 'Roboto', 'Noto Sans Syriac', 'Playwrite Česko'), información sobre sus ejes variables y el diseñador o la fundición. Debajo de los metadatos de cada fuente aparece una vista previa de texto de ejemplo,
La imagen muestra una página web de Google Fonts con un tema oscuro que presenta la fuente 'Roboto'. En la esquina superior izquierda hay una barra lateral con iconos de navegación y etiquetas de texto como 'Fonts', 'Noto', 'Icons', 'Knowledge' y 'FAQ'. Debajo aparece un icono de sol, presumiblemente para cambiar 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 compra en el extremo derecho. Debajo de la navegación superior se muestran de forma destacada las pestañas 'Specimen' (activa actualmente), 'Type tester', 'About', 'License' y 'Glyphs & languages'. La sección principal destaca el nombre de la fuente 'Roboto' con una tipografía grande y en negrita. Debajo se indica 'Designed by Christian Robertson, Paratype, Font Bureau', y esos nombres funcionan como enlaces en los que se puede hacer clic. Una fila de etiquetas similares a botones grises 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 hay un botón azul con la etiqueta 'Get font'. Sobre este botón aparece un globo informativo celeste que explica: 'Click here to download this font, get its embed code, and find out how to use it in apps and products.' Dentro de este globo, 'Got it' es un enlace en el que se puede hacer clic. Una muestra de texto grande en la fuente Roboto dice: 'Whereas disregard and contempt for human rights have resulted'. Debajo hay opciones para 'Select preview text:', con un menú desplegable para 'Writing system' y otro para 'Language'. Más abajo se introduce una sección titulada 'Styles' con una tipografía 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. Explora 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 predominantemente rojo y azul en la sección principal. La barra de navegación superior, sobre un fondo blanco, presenta la

Fuentes alojadas en tu propio servidor:

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

<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>

Usa los formatos WOFF2 y WOFF para obtener la mejor compatibilidad y rendimiento en los navegadores. Aloja los archivos de fuente en una CDN fiable o en tu propio servidor.

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

  1. Expande Centro de ayuda en la barra lateral y haz clic en Personalizar

  2. En el grupo Avanzado, haz clic en Código personalizado

  3. Busca el editor Código de cabecera personalizado

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

  5. Haz clic en Guardar cambios

El editor de código de cabecera personalizado dentro del grupo Avanzado, donde puedes pegar códigos de incrustación de fuentes y CSS

El editor Head Code no valida la sintaxis antes de guardar. Prueba el código cuidadosamente para evitar que se dañen los estilos de tu centro de ayuda.

Paso 3: Aplica la fuente mediante 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 al mismo editor de Código de cabecera personalizado, dentro del mismo bloque <style> que la declaración @font-face o en un bloque independiente.

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

Solución de problemas

Las fuentes no se cargan:

  • Comprueba 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 las fuentes alojadas en tu propio servidor)

  • Asegúrate de que los nombres de las familias tipográficas en CSS coincidan exactamente (distinguiendo entre mayúsculas y minúsculas)

El selector de tipografía muestra «No se han podido cargar las fuentes»:

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

  • Como alternativa, utiliza el método Head Code

Error al guardar la configuración:

  • 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

Prácticas recomendadas

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

  • Usa font-display: Añade font-display: swap; para evitar que el texto sea invisible mientras se carga la fuente

  • Prueba en distintos dispositivos: Comprueba que las fuentes se muestren correctamente en navegadores de escritorio y móviles

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

Recursos adicionales

¿Te fue útil?
¿Te fue útil?