Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Design Manager

Usar fuentes personalizadas en posts o páginas

Última actualización: agosto 4, 2021

Requisitos

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Básico (versión anterior)

Como alternativa, usar fuentes web estándar o usar una biblioteca de fuentes como Google fonts, puedes alojar archivos de fuentes en tu administrador de archivos y hacerlos referencia en tu archivo CSS. 

La adición de una fuente personalizada no agregará la fuente a ninguna opción de estilo de fuente en los editores de HubSpot. En cambio, deberás usar CSS para diseñar elementos de texto en tus páginas.

Para que las fuentes puedan cargarse en todos los navegadores, necesitarás varios formatos de la misma fuente. Se recomienda incluir un mínimo de versiones .woff, .ttf, y .eot de la fuente. Si utilizas una fuente que puede usarse legalmente en la web, puedes utilizar la herramienta de conversión Font Squirrel para generar los distintos formatos de archivo. También necesitarás crear reglas de @font-face adicionales para diferentes estilos y pesos (por ejemplo, oblicuo, negrita, claro, etc.). 

Nota: las fuentes personalizadas no se pueden usar en:


Para agregar fuentes personalizadas a tus hojas de estilo, carga los archivos de fuentes a la herramienta de archivos: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Archivos.
  • Haz clic en Cargar archivos y elige los archivos de fuente para cargar.   Para los mejores resultados de rendimiento, haz clic en el menú desplegable URL del archivo y selecciona el dominio en el que tu sitio está alojado.
  • En el panel del administrador de archivos, haz clic en el nombre del archivo de fuentes.
  • En el panel derecho, haz clic en Copiar URL para obtener la URL de la fuente para agregar a tu hoja de estilo.

file-manager-change-domain

A continuación, abre tu hoja de estilo en el administrador de diseño: 
@font-face { font-family: "Tu nombre de fuente";  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
  • Reemplaza tu_archivo_fuente.xxxx? con la URL de la herramienta de archivos. Repetir para cada formato. 
  • Reemplaza «Tu nombre de fuente» con el nombre de tu fuente personalizada. 

Después de reemplazar las URL de familia de fuentes y de origen de fuente en tu código, puedes hacer referencia a la font-family personalizada en tu hoja de estilo. A continuación, puedes ver un ejemplo de cómo podría verse el código final, en el cual la fuente personalizada se aplica al elemento del cuerpo de la página.

/* Jurassic Park Normal */
@font-face {
font-family: 'Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

/* Jurassic Park Bold */
@font-face {
font-family: 'Jurassic Park'; src: url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.ttf') format('truetype');
font-weight: 700;
}

body {
font-family: 'Jurassic Park';
}