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 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. Despliega Help Center en la barra lateral y 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 admite Google Fonts. Para Adobe Fonts, fuentes personalizadas o un mayor control sobre el estilo, utiliza el método de Head Code que se describe a continuación.

Añadir fuentes personalizadas mediante Head Code

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

El código de encabezado personalizado no está disponible durante el período de prueba. Actualiza a un plan de pago para utilizar este método.

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

Google Fonts:

  1. Visita Google Fonts

  2. Navega 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 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 filtrado adicionales y el área de contenido principal que muestra vistas previas de fuentes. Los elementos de la interfaz están 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 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 deslizador 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 fuentes 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 selector de modo claro/oscuro. La barra superior muestra claramente la marca 'Google Fonts' a la izquierda, un campo de búsqueda 'Search fonts' con un icono de lupa en el centro, un 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 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 de 1899 familias' y 'About these results' 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 de fuente muestra el nombre de la fuente (por ejemplo, 'Roboto', 'Noto Sans Syriac', 'Playwrite Česko'), la información de su eje variable y el diseñador/fundición. Debajo de los metadatos de cada fuente, se muestra una vista previa del texto de ejemplo.
La imagen muestra una página web de Google Fonts con tema oscuro, en la que 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 ellos, hay un icono de sol, presumiblemente para alternar entre el modo claro y el 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 de 'Specimen' (actualmente activa), 'Type tester', 'About', 'License' y 'Glyphs & languages'. La sección principal destaca el nombre de la fuente 'Roboto' en una tipografía grande y negrita. Debajo del nombre de la fuente, se indica 'Designed by Christian Robertson, Paratype, Font Bureau', siendo estos nombres enlaces en los que se puede hacer clic. Una fila de etiquetas grises similares a botones 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'. Sobre el botón hay una burbuja informativa de color azul claro que explica: 'Haz clic aquí para descargar esta fuente, obtener su código de inserción y descubrir cómo utilizarla 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, 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' 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 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 fondo degradado rojo y azul dominante en la sección principal. La barra de navegación superior, sobre un fondo blanco, incluye...

Fuentes autoalojadas:

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>

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 inserción al Head Code

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

  2. Abre el panel Advanced

  3. Localiza el editor Custom head code

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

  5. Haz clic en Save changes

El editor de Custom head code en el panel Advanced donde puedes pegar los códigos de inserció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 errores en el estilo de tu centro de ayuda.

Paso 3: Aplica 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 al mismo editor Custom head code, ya sea dentro del mismo bloque <style> de tu declaración @font-face o en un bloque independiente.

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

Resolución de problemas

Las fuentes no se 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 autoalojadas)

  • Asegúrate de que los nombres de las familias de fuentes en CSS coincidan exactamente (distingue mayúsculas de 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:

  • 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

  • Utiliza font-display: Añade font-display: swap; para evitar que el texto sea 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 reserva: Especifica siempre alternativas genéricas (por ejemplo, sans-serif, serif) en tus declaraciones de font-family

Recursos adicionales

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