Cómo agregar una fuente personalizada a un sitio web

Disponible con el plan Pro y superiores, así como durante los 7 días de prueba gratuita

Las fuentes personalizadas te pueden ayudar a crear un diseño original para tu sitio web, e incluso mostrar el estilo y personalidad de tu marca.

En este artículo, te mostraremos cómo agregar una fuente personalizada en un sitio web hecho en la plataforma de SendPulse.

Descarga la fuente personalizada

Abre el catálogo de Google Fonts y selecciona la fuente y el estilo que más te guste.

Luego, haz clic en el ícono del carrito de compras que se ubica en la parte superior derecha (Ver familias seleccionadas).

Dirígete a la sección “Usar en la web” y haz clic en la opción “Enlace”.

Desplázate hacia abajo y copia el código que está en el campo “Reglas CSS para especificar familias”.

Agrega el código a tu sitio web

Para usar los estilos de fuente, necesitas agregar dos bloques de código al <head> (encabezado) de tu sitio web.

Bloque 1. Conectar librería

Dirígete a la sección “Sitios web”, selecciona tu sitio web y haz clic en Configuración del sitio.

En la configuración de tu sitio web, dirígete a la pestaña “Código personalizado” y haz clic en Agregar código al sitio web.

Selecciona la opción <head>.

Escribe un nombre que sea fácil de encontrar en la lista de scripts añadidos.

Pega el primer código copiado en el campo.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&amp;display=swap" rel="stylesheet">

Haz clic en Agregar.

Bloque 2. Personalizar fuentes

Para sitios web

Repite los pasos descritos anteriormente y agrega el código de la fuente, del campo “Reglas CSS para especificar familias”, que se encuentra dentro de las llaves {} para especificar el selector de estilo del body:

<style>
   body { 
   font-family: 'Roboto', sans-serif;
   } 
   .sp-ui-button, 
   .sp-ui-text p, 
   .sp-ui-text a, 
   .sp-ui-text h1, 
   .sp-ui-text h2, 
   .sp-ui-text h3, 
   .sp-ui-text h4, 
   .sp-ui-text li, 
   .sp-ui-text span, 
   .field-block, 
   .field-block input { 
   font-family: 'Roboto', sans-serif; 
   } 
</style>

En este ejemplo, estamos insertando font-family: 'Roboto', sans-serif;, pero asegúrate de insertar el código con la fuente que necesitas.

Repite los pasos descritos anteriormente y agrega el código de la fuente del campo “Reglas CSS para especificar familias” que se encuentra dentro de las llaves {} para especificar el selector de estilo del body:

<style>
   body {
   font-family: 'Unbounded', sans-serif !important;
   }
   p, a, h1, h2, h3, h4, li, span, label, input {
   font-family: 'Unbounded', sans-serif !important;
   }
</style>

En nuestro ejemplo, estamos insertando font-family: 'Roboto', sans-serif;, pero asegúrate de insertar el código con la fuente que necesitas.

Observa los cambios

Entra a tu página web. Asegúrate de revisar que la nueva fuente del texto se vea correctamente.

Ten en cuenta que se aplicará la fuente personalizada en todo el sitio web y no podrás usar las fuentes estándar a través del constructor de sitios web. Si deseas aplicar una nueva fuente en ciertos textos, tendrás que editar tu código CSS.

    Califica este artículo sobre "Cómo agregar una fuente personalizada a un sitio web"

    Opinión de los usuarios: 5 / 5

    Anterior

    Cómo agregar metadatos de sitios web

    Siguiente

    Cómo transferir un sitio web y sus datos a otra cuenta

    Pruebe SendPulse hoy mismo gratis