Elementor. Cómo añadir tipografía personalizada a la lista de fuentes

Hace ya muchos años, el uso de tipografías era bastante limitado en la Web, solo disponiamos de media docena de fuentes. Con la llegada de google fonts, esto cambio radicalmente y se nos abrio un abanico de posibilidades con lo que afrontar cualquier tipo de proyecto. No obstante dado que la mayor parte de tipografías que se conocen en el mundo del diseño tienen un copyright, no estan disponibles en google fonts ya que todas estas son como es lógico Open Source.

Desde hace un tiempo Adobe que cuenta con uno de los mayores catalogos tipograficos permite usar su tipografia con sus suscripciones a través de TypeKit, pero si no dispones de una suscripción a su servicio y quieres utilziar una tipografia específica,  debes de contar con una licencia para ello.

Una vez dicho esto, y contando que tenemos los archivos de la fuente, tendremos que empezar por añadir un archivo css con las @font-face para que este disponible en tu tema.

Para ello deberemos subir los archivos de la tipografia a un subdirectorio en formato ttf, eot y woff. Como ejemplo yo subo las fuentes en un directorio dentro del tema hijo llamado fonts. A continuación creo un archivo en el directorio raiz del tema hijo llamado fonts.css con la estructura siguiente:

@font-face {
font-family: 'Nombre de la familia';
src: url('ruta tema hijo/fonts/fuente.eot');
src: url('ruta tema hijo/fonts/fuente.eot?#iefix') format('embedded-opentype'),
url('ruta tema hijo/fonts/fuente.woff') format('woff'),
url('ruta tema hijo/fonts/fuente.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Donde el nombre de la familia, es el nombre que tiene la tipografía, aunque lo pudieras cambiar si lo deseas, ya que estas asociando este nombre con los archivos de la fuente. Además debes de poner en el font-weight el peso en formato númerico o como texto, y en el font-style si es normal o cursiva (Italic).

Ahora ya sólo nos quedan los dos ultimos pasos objeto de este tutorial, primero añadirlo al tema, y para finalizar añadirlo a la lista de tipografías en Elementor.

Cómo añadirlo al tema

Abrimos el archivo functions.php y buscamos el apartado donde se añaden estilos css o js a traves de la función wp_enqueue_style con un formato similar a los que ya debes de disponer, por ejemplo en el tema de OceanWp que es el que suelo yo utilizar la línea quedaría así:

wp_enqueue_style( 'extra-fonts', get_stylesheet_directory_uri() . '/fonts.css', array( 'oceanwp-style' ), $version );

Añadirlo a Elementor

Para finalizar una vez que la tipografía esta disponible para el tema, añadiriamos el siguiente código para agregarlo a la lista de Elementor.

function mifuncion_modify_controls( $controls_registry ) {
$fonts = $controls_registry->get_control( 'font' )->get_settings( 'options' );
$misfuentes = array_merge( ['fuente' => 'system'],$fonts );
$controls_registry->get_control( 'font' )->set_settings( 'options', $misfuentes );
}
add_action( 'elementor/controls/controls_registered', 'mifuncion_modify_controls', 50, 1 );

Debes tener en cuenta que donde pone fuente, debes de poner el nombre que definiste en el archivo de css como font-family.

Y con esto ya debe aparece en la lista personalizada de tipografía y estar listo para su uso.

6 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Contenedores Flexbox

Contenedores Flexbox, la nueva forma de diseñar con Elementor 3.6

integrar-jetthemecore

Como integrar JetThemeCore con tu tema favorito

Elementor_Free_VS_Pro

Elementor gratis vs. Pro: Comparación de características

Cookie policy
We use our own and third party cookies to allow us to understand how the site is used and to support our marketing campaigns.

Recibe las novedades en tu buzón