Búsqueda

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

💡 Información relevante
Las páginas de destino están disponible para los planes Business y Enterprise.

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.com/.
  2. Seleccione la familia de fuentes que quiera usar en su página de destino.
    font-en_us.png
  3. En la sección de Estilos, añada los estilos que quiera haciendo clic en «Nombre del estilo»+. El estilo se mostrará en el panel de Revisión de 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 de sustitución por si el navegador o el sistema de su destinatario no son compatibles con la fuente de Google Font importada. 

Para crear su CSS personalizado:

  1. Copie el código CSS para la URL de la fuente de Google Fonts.
  2. Use las clases font-style-title, font-style-subtitle, font-style-head y font-style-normalText respectivamente para el título, el subtítulo, el encabezado y la fuente normal para el texto en su página de destino y especifique sus familias.
  3. Añada la regla !important al final de cada línea de código para asegurarse de que todas las reglas de estilo anteriores se anulen y que la fuente personalizada mostrada en la versión publicada de la página de destino sea la correcta.

En el siguiente ejemplo, creamos el código CSS para importar la fuente de Google Fonts «Source Sans Pro» desde el sitio web de Google Fonts (https://fonts.google.com/specimen/Source+Sans+Pro):

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

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

  1. En el editor de la página de destino, haga clic en Configuración, en la esquina inferior izquierda de la pantalla.
    settings-en_us.png

  2. Abra la pestaña de Seguimiento.

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

  4. Haga clic en Listo.
  5. 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 un socio certificado de Brevo.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 4 de 17