Cambiar fuentes tipográficas sin complementos en WordPress

Cambiar fuentes tipográficas sin complementos en WordPress

Muchas veces necesitamos incorporar nuevas fuentes tipográficas a nuestros sitios y con ello nos encontramos con la engorrosa tarea de buscar un complemento que no consuma una barbaridad de recursos en nuestro servidor.

Cambiar la tipografía en WordPress puede resultar más sencillo sin complementos de lo que puede parecer a simple vista. Pero¿cómo empezar a gestionar todo el cambio de tipografías? ¿Dónde buscamos estas tipografías?

A continuación, veremos paso a paso qué podemos hacer para que nuestro WordPress o nuestra instalación de WordPress +Divi tenga nuevas tipografías que podamos utilizar.

Búsqueda de tipografías:

Como mencionamos previamente, la búsqueda de tipografías es el primer punto para comenzar a trabajar en el cambio tipográfico de nuestro sitio web. Podemos encontrar variedades de páginas que ofrecen este servicio, tanto opciones pagas como lo son entre otras que podemos encontrar a lo largo del internet.

También podemos encontrar opciones gratuitas que nos hacen más fácil el trabajo de seleccionar una fuente que se visualice de forma correcta en nuestros sitios sin problema. Algunas páginas donde encontrar opciones gratuitas son Dafont y, la más sencilla a la hora de hacer cambios en tipografías, Google Fonts.

Descargar fuentes de Google:

Para búsquedas de tipografías en Google se puede ingresar a Google Fonts. Una vez dentro del sistema de Google, es tan fácil como seleccionar una de las tipografías que te aparecen o, si conoces el nombre de la fuente, utilizar el buscador en la parte superior:

En la sección «Categoría», podemos filtrar aspectos básicos de la fuente que queremos buscar como, por ejemplo, si esta fuente es serif, sans serif, display, handwritting, etc.

Por otra parte, se puede seleccionar el lenguaje nativo de esta fuente, si se necesita incorporar algún idioma extranjero, y sus propiedades, tales como grosor, altura, anchura, etc.

Una vez seleccionada la fuente ideal para nuestro proyecto, la descargamos para poder utilizarla en nuestro sitio bajo el método de incrustación directa en nuestro servidor. Para ello, al ingresar a nuestra fuente elegida, nos mostrará varias opciones.

Aquí podemos visualizar un botón con la acción para descargar dicha familia de fuente. La familia son las versiones que poseen las tipografías como, por ejemplo, bold, regular, y cursiva, entre otras.

Descargar fuentes de otros sitios web

Esto dependerá del sitio utilicemos pero los conceptos básicos serán los mismos. Por ejemplo, si ingresamos a Dafont, veremos muchas opciones para seleccionar el tipo de fuente que queremos. Está algo menos organizado que Google Fonts, pero es igualmente beneficioso en el momento de seleccionar nuestra tipografía.

Igual que en Google Fonts, tenemos botones para descargar la fuente tipográfica. Una vez la seleccionemos, basándonos en los criterios superiores o bien identifiquemos una que nos guste, podemos descargarla mediante el botón que lo indica.

Pasos a seguir para utilizar fuentes descargadas a nuestro sitio web.

Una vez tengamos nuestra tipografía seleccionada y descargada, podemos pasar a siguiente paso: subirla a nuestro servidor para que sea asimilada por nuestro sitio directamente dentro de nuestros archivos y de forma que nuestro sitio los tome de forma más efectiva.

Esto podemos hacerlo de dos maneras: mediante subida de archivos por FTP o por medio de nuestro cPanel.

Acceder a nuestro servidor por medio de FTP

Con esta opción, es recomendable que utilices un gestor FTP o programa de transferencia FTP. Uno de los más utilizados, que también es gratuito, es FileZilla. Con este programa puedes tener acceso a las carpetas del servidor y es compatible con Windows, Linux y macOS, lo que lo hace una herramienta bastante completa y accesible para el traspaso de contenido.

Para elaborar la conexión necesitarás los datos de conexión FTP. Estos datos constan de:

Servidor: nombre del dominio o subdominio al cual se conectará el programa

Puerto: puerto asignado para conexión FTP (opcional)

Modo de acceso: seleccionamos «normal» para poder ingresar manualmente el usuario y la contraseña que tengamos para el acceso del servidor

Usuario: usuario creado para permitir el acceso al servidor

Contraseña: clave específicamente creada para el usuario previamente creado

Acceder a nuestro servidor por medio de cPanel

Este paso es similar al anterior pero para esto simplemente debes ingresar a tu panel de administración de cuenta siguiendo nuestra guía: Como acceder al cPanel.

Una vez dentro, podemos entrar al área de administración de archivos ubicado en la parte superior bajo el mismo nombre:

Ahí encontraremos una interfaz parecida al FTP con las carpetas, a las que podemos ingresar haciendo clic sobre las áreas correspondientes.

Subir archivos a nuestro servidor

Una nos conectemos satisfactoriamente a nuestro servidor, veremos todas las carpetas asociadas tanto a nuestros dominios principales como subdominios o carpetas temporales. Así que, lo primero una vez conectados, será identificar dónde vamos a subir nuestras fuentes.

Generalmente, utilizamos nuestro dominio en la raíz de nuestro servidor, por lo que es posible que encuentres la carpeta wp-content/tema_utilizado dentro de Public_Html. De no ser así, debes ingresar a la carpeta en la que se esté visualizando tu sitio web y luego ingresar a la carpeta de este contenido.

Es posible que según tu tema ya poseas una carpeta dedicada a fuentes bajo el nombre de Fonts. De no ser así, puedes crearla sin ningún problema, aunque es recomendable hacerlo directamente dentro del Tema, para que esté todo más organizado. Como esta carpeta sería nueva, puedes asignarle el nombre que desees.

Los comprimidos con las tipografías suelen tener archivos con extensiones .eot, .woff, .svg o .ttf, siendo este último la más común entre descargas tipográficas.

Una vez tengas estos archivos subidos a tu servidor en la carpeta correspondiente (creada por ti o por defecto del Tema), solo debes indicarle al Tema dónde se encuentran estas tipografías para que puedas utilizarlas en tu sitio.

Para insertar dicho código y que sea reconocido por tu WordPress puedes ingresar un código tanto en el archivo style.css, ubicado en la misma ruta de tu Tema en los archivos FTP o cPanel, como ingresando a Apariencias > Editor de temas.

En ambos casos nos encontraremos con un archivo en el cual debemos insertar un código en la parte superior del mismo luego de la descripción general.

@font-face {

font-family: nombre-de-la-fuente;

src: url(https://dominio/carpeta_de_dominio(en caso de tenerla)/wp-content/themes/tu tema/fuentes/ nombre_de_la_fuente.ttf);

}

Con este código le estamos indicando el nombre de la fuente que estamos utilizando y la ruta especifica donde subimos nuestro archivo de fuente. Por ejemplo, si la hemos subido a wp-content/tutema/fuentes/ la ruta que debemos ingresar sería:

http://dominio/carpeta_de_dominio(en caso de tenerla)/wp-content/themes/tu tema/fuentes/ nombre_de_la_fuente.ttf

Establecer CSS para elementos de la web

Una vez tenemos identificado por el sistema y tu tema como se llamará y de dónde se tomará la fuente tipográfica nueva, es el momento de elegir dónde deseamos que se visualice dentro de nuestro sitio. Para ello vamos a utilizar una herramienta que poseen todos nuestros exploradores que nos ayudará a verificar los códigos a ingresar al WordPress para que sea asimilado.

Al ingresar a nuestro sitio e identificar el elemento que deseamos modificar en fuente tipográfica, procedemos a hacer clic derecho sobre él y luego hacemos clic en Inspeccionar elemento. Al hacer esto, nos mostrará todo el código referente al área en la que hicimos clic.

Veremos que el título de la sección o en lo que hemos hecho clic es un H1, por lo que para agregar el texto debemos ingresar el código respectivo a este H1:

h1 {

font-family: nombre_de_la_fuente;

}

Igualmente, si quisiéramos cambiarla para los textos de la web, es decir los P podríamos ingresar un código como este:

p {

font-family: nombre_de_la_fuente;

}

En ciertos casos, tenemos una clase en específico, por ejemplo:

Vemos que el botón de ver opciones y contratar posee una clase, por lo tanto también podríamos aplicar la fuente a esta clase en particular:

a.et_pb_button.et_pb_custom_button_icon.et_pb_button_0.et_hover_enabled.et_pb_bg_layout_dark {

font-family: nombre-de-la-fuente !important;

}

Como podemos ver, todo quedaría en poder inspeccionar el elemento que deseamos modificar y posterior a esto agregar la misma estructura de código CSS solamente incorporando la opción de Font-family para mantener la selección de tipografía que hemos subido a nuestro servidor.

Utilizar fuentes personalizadas en Divi

A diferencia del árduo proceso que tenemos que realizar en una instalación que no posee DIvi, esta es mucho más sencilla:

  1. Abre una publicación (página o artículo) en el Divi Builder e insertar un módulo de texto. También se puede hacer clic en el icono de la herramienta en un texto ya creado en la web.
  2. Ingresa a la pestaña Diseño donde se verás todas las opciones pertinentes al diseño del texto.
  3. Abre el desplegable correspondiente al Texto.
  4. Haz clic en el botón de texto fuente.
  5. En este desplegable, haz clic en el botón de «subir». De esta forma el sistema nos permitirá seleccionar la fuente a incorporar y que previamente hemos descargado.
  6. Selecciona un nombre para dicha fuente.
  7. Elige el archivo de extensión previamente mencionada .eot, .woff, .svg o .ttf
  8. Sube el archivo y selecciona la fuente para poder visualizarla.

Configuración de fuente personalizada por defecto en Divi

Otra opción que tenemos al seleccionar las tipografías, es elegir una en específico para todos los textos de nuestra web:

  1. Entra a Apariencias > Personalizar para ingresar al personalizador por defecto de WordPress
  2. Una vez dentro, ingresamos a ajustes generales
  3. Dentro de los ajustes entramos a Tipografías
  4. Una vez dentro, veremos entre las opciones Fuentes de la cabecera y Fuentes del cuerpo del texto
  5. Por último, podemos seleccionar la fuente e incluso entre la primera opción puedes encontrar la fuente que previamente en el paso anterior se ha subido.

Problema que puede presentarse en momento de subir la fuente tipográfica

A veces no se logra importar la fuente personalizada y muestra el mensaje:

«Lo siento, este tipo de archivo no está permitido por razones de seguridad».

Para solventar este problema, puedes hacer un ajuste en el archivo Wp-config.php e insertar el código:

define('ALLOW_UNFILTERED_UPLOADS', true);

Este código iría justo antes del mensaje de bienvenida a WordPress. Para que sea asimilado antes del inicio del mismo, una vez ingreses la fuente, debes eliminar este código por motivos de seguridad en tu sitio web.

Updated on 11 julio, 2021

Related Articles