Cómo utilizar fuentes personalizadas en su sitio web

Cómo funciona

Si no desea utilizar las fuentes predeterminadas disponibles en Site Builder, puede conectar diferentes fuentes del catálogo Google Fonts para los encabezados o el cuerpo del texto a través de un código HTML personalizado. Puede utilizar una solución existente o añadir su propio código.

Cómo conseguirlo

Utilizar una solución existente

1. Abra su proyecto en Cuenta del editor.
2. En la barra lateral haga clic en Site Builder.
3. Haga clic en Open Site Builder.
4. Inserte la URL de la fuente en el bloque Custom code y especifique las clases de estilo para lasfont-family que debe cambiarse el valor .

Ejemplo de cambio de la fuente del texto de la cabecera

<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-header-font h1,
  .custom-header-font h2,
  .custom-header-font h3,
  .custom-header-font h4,
  .custom-header-font h5,
  .custom-header-font h6 {
    font-family: 'Playfair Display';
  }
</style>

Ejemplo de cambio de la fuente tipográfica del cuerpo del texto

<style>
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-main-font {
    font-family: 'Playfair Display';
  }
</style>

5. Haga clic en Preview para ver sus cambios.

Vea el tutorial en vídeo para seguir estas instrucciones:

Agregar su propio código

1. En Builder, haga clic en Add block y seleccione Custom code.

2. Inserte su propio código en el bloque.

Enlaces útiles