Añadir fuentes personalizadas a Beaver Builder

Tanto el plugin Beaver Builder como el tema que Beaver Builder nos proporciona para WordPress (Beaver Builder Theme) tienen integradas las fuentes de sistema (Arial, Helvetica, etc.) y las fuentes de Google, pero a veces querremos subir nuestra propia fuente que habremos comprado y descargado, y luego usarla y que nos salga en los menús como las otras fuentes.

Para añadir fuentes personalizadas a Beaver Builder, tendrás que seguir 3 pasos.

1. Preparar las fuentes y subirlas a la web
2. Cargar las fuentes con CSS
3. Definir dónde se utilizarán las fuentes.

Empecemos.

Paso 1: Preparando las fuentes personalizadas

Primero de todo tendrás que obtener las fuentes, obviamente. Estas tienen que estar en formato .woff y .woff2 (sí, tienes que tener un fichero .woff y uno .woff2). Si lo que tienes son fuentes de escritorio (formatos .otf o .ttf), puedes usar un conversor online para obtener los formatos anteriores. Por ejemplo: Font Squirrel Webfont Generator.

Por cierto, asegúrate de tener una licencia o el permiso explícito para poder usar esas fuentes.

Cuando ya tengas las fuentes en formato .woff y .woff2, las tienes que subir a tu web. Puedes subirlas donde quieras, pero te recomiendo que las subas a una carpeta que se llame fonts en la carpeta de tu tema hijo. En Beaver Builder será wp-content/themes/bb-theme-child/fonts, pero asegúrate primero que tu tema hijo no se llama de otra forma.

Paso 2: Cargando las nuevas fuentes

Mediante CSS especificaremos la ubicación de las fuentes que hemos subido antes y las cargaremos en el sitio web.

1. Ve al lugar en tu sitio web donde puedas añadir código CSS que se pueda aplicar de manera global a tu web. Normalmente podrás ir al menú Apariencia > Personalizar > CSS adicional, a menos que lo tengas desactivado por alguna razón.
2. Si tu kit de fuentes incluye una hoja de estilos CSS (un fichero .css), copia todas las reglas @font-face y pégalas en el editor del punto anterior. Si no, empieza con el siguiente ejemplo:

/* Cargamos fuentes personalizadas */
@font-face {
font-family: "Proxima Nova";
src: url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaA-Regular.woff2") format("woff2"),
url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaA-Regular.woff") format("woff");
font-weight: 400;
}

3. En el código anterior, modifica la línea que empieza por font-family para que ponga la fuente tal y como quieras que te salga en la selección de fuentes en tu web. Por ejemplo, arriba podrías cambiarlo de “Proxima Nova” a “Forza Book”, si tu fuente fuese la Forza Book.
4. Modifica la línea que empieza por src para que las URL apunten a las fuentes que has subido antes. Por ejemplo, antes he subido los archivos ProximaNovaA-Regular.woff y ProximaNovaA-Regular.woff2, por tanto, las URL serán las que ves arriba.
5. En la línea que empieza por font-weight, tienes que especificar qué “peso” tiene la fuente que has subido. ¿Es negrita, semi-negrita, normal…? En esta tabla puedes encontrar qué número poner, de acuerdo al peso que tenga tu fuente: font-weight – CSS: Cascading Style Sheets | MDN.
6. Si tenemos más de una fuente, o más de un “peso” para la fuente, tenemos que repetir los pasos del 2 al 5 para cada par de woff y woff2 que tengas. Al final te quedará algo así

/* Cargamos la fuente Forza Book */
@font-face {
font-family: "Forza Book";
src: url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/Forza-book.woff2") format("woff2"),
url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/Forza-book.woff") format("woff");
font-weight: 400;
}
/* Cargamos la fuente Proxima Nova con peso 700 (negrita/bold) */
@font-face {
font-family: "Proxima Nova";
src: url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaA-Bold.woff2") format("woff2"),
url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaA-Bold.woff") format("woff");
font-weight: 700;
}
/* Cargamos la fuente Proxima Nova con peso 600 (semi-negrita/semibold) */
@font-face {
font-family: "Proxima Nova";
src: url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNova-Semibold.woff2") format("woff2"),
url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNova-Semibold.woff") format("woff");
font-weight: 600;
}
/* Cargamos la fuente Proxima Nova con peso 400 (normal/regular) */
@font-face {
font-family: "Proxima Nova";
src: url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaA-Regular.woff2") format("woff2"),
url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaA-Regular.woff") format("woff");
font-weight: 400;
}
/* Cargamos la fuente Proxima Nova con peso 100 (delgada/thin) */
@font-face {
font-family: "Proxima Nova";
src: url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaT-Thin.woff2") format("woff2"),
url("https://www.asistentewp.com/wp-content/themes/bb-theme-child/fonts/ProximaNovaT-Thin.woff") format("woff");
font-weight: 100;
}

Paso 3: Definir dónde se utilizaran las fuentes

En este paso añadiremos un pequeño trozo de código a nuestro tema para que reconozca las fuentes que hemos cargado.

1. Abre el famoso functions.php con un editor de texto. Para Beaver Builder, está ubicado en wp-content/themes/bb-theme-child/.
2. Añade el siguiente código al final del fichero

// Añadimos fuentes personalizadas en la lista de fuentes
function my_bb_custom_fonts ( $system_fonts ) {
$system_fonts[ 'ejemplo' ] = array(
'fallback' => 'Verdana, Arial, sans-serif',
'weights' => array(
'100',
'400',
'600',
'700',
'900',
),
);
return $system_fonts;
}
add_filter( 'fl_theme_system_fonts', 'my_bb_custom_fonts' );
add_filter( 'fl_builder_font_families_system', 'my_bb_custom_fonts' );

3. En el código anterior, en la línea $system_fonts[ ‘ejemplo’ ] = array(, modifica el texto ejemplo por el nombre de la fuente que has definido en el paso 2. Es decir, “Proxima Nova”.
4. En la siguiente línea que empieza por fallback, vas a definir las fuentes que verá el usuario si por algún motivo tus fuentes personalizadas no se pueden cargar. Si no sabes qué poner, deja lo que ves en el código.
5. La siguiente línea es la que empieza por weights. Aquí tienes que poner todos los pesos de las fuentes que hemos definido en el paso 2. Fíjate que cada peso acaba en una coma, incluso el último.
6. Siguiendo el anterior ejemplo, si queremos añadir otra fuente (no otro peso de la misma fuente, eso ya lo hemos hecho en el punto anterior) tenemos que añadir el código para la fuente Forza Book también. Quedaría así:

// Añadimos fuentes personalizadas en la lista de fuentes
function my_bb_custom_fonts ( $system_fonts ) {
$system_fonts[ 'ejemplo' ] = array(
'fallback' => 'Verdana, Arial, sans-serif',
'weights' => array(
'100',
'400',
'600',
'700',
'900',
),
);
$system_fonts[ 'Forza Book' ] = array(
'fallback' => 'Verdana, Arial, sans-serif',
'weights' => array(
'400',
),
);
return $system_fonts;
}
add_filter( 'fl_theme_system_fonts', 'my_bb_custom_fonts' );
add_filter( 'fl_builder_font_families_system', 'my_bb_custom_fonts' );

7. La penúltima y última línea son las que añaden las fuentes al Personalizador (menú Apariencia > Personalizar) y a los módulos de Beaver Builder, respectivamente. No hay que hacer nada a menos que no quieras poner las fuentes personalizadas en uno de los dos casos.

Y con esto ya veremos, por ejemplo, que nos sale la Proxima Nova y la Forza Book:

No ha sido tan complicado añadir fuentes personalizadas a Beaver Builder, ¿no? Además, los pasos 1 y 2 se pueden reutilizar para cualquier tema de WordPress, aunque deberás averiguar cómo hacer el paso 3 en tu tema.