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

¿Cómo agrego Google Fonts a mis páginas de HubSpot y CTA?

Última actualización: diciembre 20, 2018

Requisitos

Marketing Hub Professional, Enterprise
Básico
HubSpot CMS

Las etiquetas de enlaces de fuentes de Google se pueden aplicar a una página específica o en todas tus páginas en tu configuración usando el campo HTML del encabezado. Si estás cómodo editando CSS, podrías agregar el código @import a la parte superior de un archivo CSS específico.

Primero, obten el script de Google Font de Google:

Copiar el Script de Google Font

  • Navega a fonts.google.com y busca la fuente deseada.
  • Haz clic en el ícono más + junto al nombre de la fuente.

  • Haz clic en el botón 1 familia seleccionada que aparece en la parte inferior de la pantalla.
  • Si quieres importar estilos adicionales o pesos para esa familia de fuentes, selecciona la pestaña Personalizar y usa las casillas de comprobación.

  • Selecciona la pestaña @import y copia el script proporcionado por Google, por ejemplo, @import url(http://fonts.googleapis.com/css?family=Open+Sans);

Ahora que has copiado este código, puedes regresar a HubSpot para aplicar la Google Font.

Agrega Google Font a tus páginas de HubSpot

  • Aplicar la fuente de Google a cualquier selector CSS deseado, como se muestra en el siguiente ejemplo. 

Imagen agregada por el usuario

Agregar Google Fonts a tu CTA

  • Copia el código especificado en CSS desde Google Fonts.

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > CTAs.
  • Coloca el cursor sobre la CTA que deseas actualizar con esta fuente y haz clic en Acciones > Editar
  • Haz clic en Opciones avanzadas para ampliar más opciones.
  • Agrega el código especifico en CSS desde Google Fonts a la sección CSS personalizada. Verás la fuente de Google aplicada a tu CTA tan pronto como ingreses este CSS. 

  • Haz clic en Siguiente en la esquina inferior derecha para finalizar los detalles de tu CTA y luego haz clic en Guardar