Búsqueda

Usar una fuente de Google Fonts en una página de destino

clickable_banner-pricing_3_en-us.png

En este artículo explicaremos cómo importar y usar una fuente de Google Fonts en una página de destino.

1️⃣ Obtener el código de importación CSS

Para encontrar la URL de una fuente de Google Fonts:

  1. Vaya a https://fonts.google.coem/.
  2. Seleccione la familia de fuentes que desea utilizar en su landing page.
    font-en_us.png
  3. En la sección Estilos, agregue los estilos que desee haciendo clic en Select "Name of style" + (Seleccionar "Nombre del estilo" +). El estilo aparecerá en el panel Familia seleccionada a la derecha:select-font-en_us.png
  4. Debajo de la sección de Usar en la web, seleccione la opción de @import. Verá el código CSS para la URL de la fuente de Google Font y las reglas CSS para la familia específica.
    css_code_rules-en_us.png

2️⃣ Crear su CSS personalizado

💡 Información relevante
Añada una fuente alternativa en caso de que el navegador o el sistema de su destinatario no admitan la fuente de Google importada. 

Para crear su CSS personalizado:

  1. Copie el código CSS para la URL de la fuente de Google Fonts.
  2. Utilice las clases font-style-title, font-style-subtitle, font-style-head and font-style-normalText respectivamente para los estilos de fuente de cuerpo Título, Subtítulo, Encabezado y Normal en su landing page y especifique sus familias.
  3. Agregue la importante regla al final de cada línea de código para asegurarse de que se anularán todas las reglas de estilo anteriores y que la fuente personalizada que se muestra en la versión publicada del landing page sea la correcta.

En el siguiente ejemplo, construimos el código CSS para importar la fuente de Google "Roboto" desde el sitio web de fuentes de Google (https://fonts.google.com/specimen/Roboto):

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap');
.font-style-title {font-family:'Roboto', sans-serif !important; } .font-style-subtitle {font-family: 'Roboto', sans-serif !important; } .font-style-heading {font-family: 'Roboto', sans-serif !important; } .font-style-normalText {font-family: 'Roboto', sans-serif !important; } </style>

3️⃣ Añadir el CSS personalizado a la página de destino

  1. Vaya a Marketing > Landing pages.
  2. Seleccione el landing page en el que quiere utilizar la fuente de Google.

  3. En el editor de landing page, haga clic en Settings (Configuración) en la esquina inferior izquierda.
    settings-en_us.png

  4. Abra la pestaña de Seguimiento.

  5. En Etiqueta de encabezado, añada su CSS personalizado.
    add_css-en_us.png

  6. Haga clic en Listo.
  7. Si su página de destino ya está publicada, haga clic en Lanzar y vuelva a publicarla para que se apliquen los cambios.

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 8 de 30