COS-General

¿Cómo puedo implementar una fuente personalizada en HubSpot?

Última actualización: February 12, 2016

Como una alternativa para no utilizar las fuentes web estándares o para utilizar una biblioteca de fuentes como Google fonts, puedes alojar archivos de fuentes en el Administrador de archivos y hacer referencia a ellos en tu archivo CSS.

Para que las fuentes puedan cargarse en todos los navegadores, necesitarás varios formatos de la misma fuente. Para obtener los mejores resultados, necesitarás como mínimo las versiones .eot, .woff y .ttf de la fuente. Ten en cuenta que estos pasos solo funcionarán para el contenido de la página web y no para las plantillas de correo electrónico. 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. Una vez que tengas los 3 archivos de fuentes, realiza los siguientes pasos:

  • Navega hasta Contenido > Administrador de archivos.
  • Haz clic en Cargar archivos... y selecciona los archivos de fuentes para cargar.
  • Navega hasta Contenido > Administrador de diseño.
  • Abre la CSS que se aplica a la plantilla de tu página o blog.
  • En la parte superior de tu archivo CSS, pega el siguiente código @font-face que aparece a continuación:

			@font-face {
			  font-family: 'Your Font Name';
			  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.

  • Una vez que hayas pegado ese código, reemplaza «font-family» con el nombre de la fuente.
  • Haz clic en Acciones > Insertar archivo.
  • Busca el archivo de la fuente.
  • Para lograr resultados óptimos, selecciona el dominio en el que está alojado tu contenido.
  • Haz clic en Usar Archivo.
Imagen añadida por el usuario
Imagen añadida por el usuario

Una vez que hayas reemplazado la familia de la fuente («font-family») y las URL de la fuente en tu código, estás listo para comenzar a hacer referencia a esa familia de fuentes personalizada en tu CSS. 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.

@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');
			}
			
			body{
			font-family: 'Jurassic Park';
			}