Agregar Google Fonts a páginas y CTA
Última actualización: octubre 19, 2020
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.
Agrega Google Font a tus páginas de HubSpot
- En tu cuenta de HubSpot, busca la hoja de estilo que se está aplicando a tus páginas y abre el archivo en tu administrador de diseño.
- Pega el código @import en la primera línea de tu archivo CSS. Debe estar en la parte superior de tu hoja de estilo CSS.
- 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.
Contenido relacionado
-
Exportar tu contenido y datos
Descubre como exporta tu contenido y datos de HubSpot desde tu cuenta, como páginas, contactos y archivos. ...
Base de conocimientos -
Agregar el código de Google Tag Manager a las páginas
Puedes integrar Google Tag Manager con HubSpot para administrar el seguimiento de múltiples fuentes en un...
Base de conocimientos -
Personalizar tu contenido
Con fichas de personalización, puedes mostrar contenido personalizado a tus contactos según sus valores de...
Base de conocimientos