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

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.

Tabla de contenidos

6 Comentarios

  1. Eduardo

    Perfecto! Muchas gracias justo lo que estaba buscando para resolver un proyecto.

  2. Ubald

    Me parece superútil pero ¿Qué pasa cuando se actualiza el tema? No sería mejor trabajar con un child theme?

    1. Ángel Julián Mena

      Se supone que las modificaciones las debes realizar sobre el tema hijo, para evitar problemas con las actualizaciones del tema como bien dices.

  3. Fabian Koliren

    Excelente artículo, me resulto de mucha utilidad.
    gracias

  4. Nicanor

    donde anado el codigo final?

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Artículos relacionados

woostify-2
La nueva versión de Woostify es el mayor update hasta la fecha
transiciones-paginas-elementor
Transiciones de página y precarga. Nuevo experimento disponible en la versión de Elementor Developer
etiquetas-dinamicas-woocommerce
Etiquetas dinámicas para WooCommerce
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