Landing Pages

Agregar Google Fonts a páginas y CTA

Última actualización: octubre 19, 2020

Requisitos

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

Puedes agregar etiquetas de enlace de Google Font a una o todas las páginas en tu configuración o en 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.

Nota:si estás creando contenido usando un tema, puedes elegir cualquier Google Font directamente dentro de la configuración de tu tema. Todas las Google Fonts también son compatibles con plantillas de starter en la pestaña Diseño.

Copiar el Script de Google Font

Primero, copia el script para tu fuente deseada de Google Fonts.

  • Navega a fonts.google.com.
  • En la barra de búsqueda, busca el nombre de la fuente deseada.
  • Haz clic en el nombre de la fuente para ver una lista completa de estilos disponibles para importar.
  • Haz clic en + Seleccionar este estilo junto a cada estilo que deseas importar desde esta fuente.
  • En el panel derecho, selecciona la pestaña Incrustar y luego selecciona @import.
  • Copiar el script @import proporcionado por Google sin la etiqueta <style>. Agregarás este script a la parte superior de tu hoja de estilo en tu cuenta de HubSpot.
  • A continuación, aplicarás estas fuentes a selectores CSS específicos en tu hoja de estilo de HubSpot usando las reglas CSS para especificar familias de Google Fonts.

import-google-fonts-to-stylesheet

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. 

h1 {
font-family: 'Comic Neue', cursive;
}

Agregar tu Google Font a una CTA

Puedes agregar una Google Font a una CTA personalizada en tu cuenta. Esta opción no está disponible para una CTA de imagen.

  • 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 editar y luego haz clic en el menú desplegable Acciones y selecciona Editar
  • En la parte inferior del editor de CTA en el panel derecho, haz clic en Opciones avanzadas.
  • En el campo de texto CSS personalizado, pega el código de reglas CSS para especificar familias de Google Fonts. Verás la Google Font 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. Haz clic en Guardar para aplicar tus cambios.