Elementor. Cómo añadir tipografía personalizada a la lista de fuentes
Ángel Julián Mena
Diseño y desarrollo de sitios, especialmente de comercio electrónico con WordPress y WooCommerce

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.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

5 Comentarios

  1. Avatar
    Eduardo

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

  2. Avatar
    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
      Á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. Avatar
    Fabian Koliren

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

Deja una respuesta

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

Recibe las novedades en tu buzón

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.