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í.
CMS-General

Usar fuentes personalizadas en posts o páginas

Última actualización: abril 10, 2019

Requisitos

Marketing Hub  Professional, Enterprise
Básico
HubSpot CMS

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.

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: estos pasos solo funcionan para las plantillas de publicaciones de blog y las plantillas de página web y no para plantillas de correo electrónico como la mayoría de los clientes de correo electrónico no admiten fuentes personalizadas

@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');}

Luego, deberás reemplazar las URL de fuentes en el bloque de código font-face para hacer referencia a tu fuente alojada:

  • 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

Después de reemplazar la familia de fuentes y las URL de fuente en tu código, puedes hacer referencia a la familia de fuentes 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';
}