¿Cómo puedo agregar una tipografía externa a una landing page creada desde DataCrush Web Builder? – Centro de ayuda DataCrush

Si necesitas agregar una tipografía externa a tu landing page debes realizar los siguientes pasos, de esta guía:

Primero debes verificar si tu tipografía está disponible en Google Fonts para poder ser agregada:

1. Accede a tu landing page desde la herramienta Web Builder.
2. Selecciona un elemento texto, y en la parte izquierda accede a la solapa "Estilos", despliega el combo de "Fuentes" y presiona el botón "Agregar/Quitar fuente"

3. Busca la tipografía, selecciónala y presiona la opción "Instalar y usar"

4. La tipografía se encontrará disponible para utilizar en esta landing page, repite estos pasos en otras landings que quieras utilizar la misma tipografía

IMPORTANTE: En el caso que la tipografía no se encuentra en Google Fonts debes utilizar los archivos correspondientes para configurarla de forma manual. De ser así continúa con los siguientes pasos que se describen a continuación

Debes contar con los archivos necesarios para utilizar la tipografía, estos deben estar disponibles en alguna URL.

Agregar una nueva hoja de estilos desde la opción Stylesheets.

En primer lugar, es necesario crear una nueva hoja de estilos para poder agregar la nueva tipografía. Para hacer esto, debes hacer clic en el botón Stylesheets que se encuentra en la parte inferior del área de trabajo y seleccionar la opción +Agregar nueva hoja de estilos.

Agregar el código para sumar la nueva tipografía.

Dentro de la hoja de estilos creada, debes pegar el siguiente código:

<style>
@font-face {
font-family: 'Nombre de la tipografía';
font-style: normal;
font-weight: 400;
src: url(https://yourdomain.com/fonts/font.ttf) format("truetype");
}

.miClaseDeFuente {
font-family: 'Nombre de la tipografía' !important;
}
</style>

A continuación, te brindamos algunos detalles a tener en cuenta como referencia:

Nombre de la tipografía: Corresponde al nombre de la tipografía que deseas utilizar.
.miClaseDeFuente: Es el nombre de la clase que luego utilizarás en cada uno de los elementos.

Luego, para grabar la nueva fuente, debes seleccionar la opción Grabar hoja de estilos.

Utilizar la clase en los elementos correspondientes.

Una vez que hayas creado la clase correspondiente, podrás utilizarla en cualquier elemento, como textos, botones, etc. Por ejemplo, si deseas cambiar la tipografía de un texto ya creado dentro de la landing page, debes seleccionar el elemento de texto que creaste y, en la solapa de Estilo de la columna derecha, agregar la clase correspondiente desde la sección de Metadatos del elemento.

Esto hará que al texto seleccionado, se le aplique la nueva tipografía asignada en la clase.

Relacionada con

Primero debes verificar si tu tipografía está disponible en Google Fonts para poder ser agregada:

Agregar una nueva hoja de estilos desde la opción Stylesheets.

Agregar el código para sumar la nueva tipografía.

Utilizar la clase en los elementos correspondientes.

Artículos relacionados