Cómo agregar nuevas fuentes en WordPress

En esta guía, le diré cómo agregar fuentes personalizadas a su sitio de WordPress .

Seamos realistas, a todos nos encantan los blogs y sitios web con fuentes elegidas sabiamente. No solo hacen que todo el sitio se vea bien, sino que también enganchan al usuario a su contenido.
Sin embargo, la elección de fuentes de WordPress es limitada y depende del tema que esté utilizando. Pero la buena noticia es que puede agregar fuentes personalizadas a WordPress manualmente o haciendo uso de algunos complementos.

Elija la fuente para usar en WordPress

Hay varios sitios web de los que puede obtener fuentes web gratuitas . Por ejemplo, Google Font Service es un servicio de fuentes gratuito proporcionado por Google y tiene fuentes en más de 135 idiomas. Edge Web Fonts, por otro lado, es un servicio de fuentes gratuito proporcionado por Adobe que cuenta con su extensa colección de fuentes web. También puede probar Typekit, una biblioteca gratuita de miles de fuentes web, junto con Fonts.com, que afirma proporcionar más de 150.000 fuentes web y de escritorio.

Ahora que ha encontrado la fuente que desea usar en su sitio web, es hora de verificar su formato. Vale la pena mencionar aquí que no todas las fuentes son compatibles con los navegadores web. Pero no se preocupe, incluso si la fuente elegida no es compatible, aún puede convertirla a un formato compatible.

Antes de convertir fuentes de un formato a otro, echemos un vistazo rápido a los diferentes formatos de fuente.

Fuentes de tipo abierto
Abreviadas como OTF , estas son las fuentes web más utilizadas y son una marca comercial registrada de Microsoft. Funcionan bien con casi todos los navegadores principales.

Fuentes True Type
También llamadas TTF , estas fuentes fueron desarrolladas por Microsoft y Apple en la década de 1980 y se utilizan ampliamente para los sistemas operativos Windows y Mac. Son compatibles con los principales navegadores.

Web Open Font Format WOFF
fuentes son ampliamente utilizados en páginas web y son recomendadas por el W3C. Estos son principalmente compatibles con todos los navegadores.

WOFF 2.0 Las
fuentes WOFF 2.0 tienen una ventaja sobre WOFF 1.0 debido a sus mejores capacidades de compresión. No son compatibles con Safari e Internet Explorer, pero funcionan bien con Google Chrome, Firefox y Opera.

Fuentes de tipo abierto incrustadas
Estas fuentes son fuentes OTF compactas y se utilizan como fuentes incrustadas en páginas web y son compatibles con los principales navegadores.

Si ha encontrado la fuente que desea usar en su sitio web de WordPress, pero no está seguro de si es compatible con todos los navegadores, use la herramienta Generador de fuentes web . Esta herramienta le permite convertir fácilmente cualquier fuente a un formato compatible con la web:

1. Acceda a la herramienta Generador de fuentes web .
2. Presione el botón Cargar fuentes para cargar su fuente y acepte que las fuentes son legalmente elegibles para la incrustación en la web.
3. Presione el botón Descargar y guarde el archivo .zip en su computadora.
4. Dentro del archivo .zip encontrará las fuentes en formato WOFF y WOFF 2.0 junto con los archivos CSS y la página HTML de demostración. Estos formatos de fuente son compatibles con casi todos los navegadores.

Agregue nuevas fuentes en WordPress a través de complementos

Los complementos son probablemente la forma más fácil de agregar fuentes en WordPress. Estos son algunos de los complementos más populares que se enumeran a continuación:

Fuente WP Google

Puede agregar fácilmente fuentes a su sitio web de WordPress utilizando el complemento WP Google Font para fuentes . Este complemento incluye automáticamente el código necesario para agregar las nuevas fuentes a su sitio de WordPress. También brinda la libertad de usar fuentes personalizadas en elementos CSS específicos por parte del administrador de WordPress.

Simplemente instale este complemento desde el directorio oficial de complementos de WordPress y abra la nueva sección que se creará en el panel de WordPress:  Google Fonts . Aparecerá el Panel de control de fuentes de Google, es decir, la página de configuración. Aquí puede seleccionar fuentes y cambiar varias configuraciones, como estilo de fuente, elementos asignados, etc.

Usar cualquier fuente

Use Any Font es otro complemento a través del cual puede agregar fuentes a su sitio web de WordPress.

Puede instalar este complemento desde el directorio oficial de complementos de WordPress. Una vez que se complete la instalación, vaya a la sección Usar cualquier fuente, cree una clave API gratuita y presione el botón Verificar.

Una vez que se complete la verificación, podrá cargar fuentes en formatos TTF, OTF, WFF. El complemento también le permite asignar fuentes a elementos personalizados.

Agregue nuevas fuentes en WordPress a mano

Si no desea sobrecargar su WordPress con complementos, puede agregar fuentes manualmente a WordPress . El proceso es bastante simple: debe cargar las fuentes en su cuenta de alojamiento y editar el archivo CSS del tema .

Instrucciones precisas sobre cómo agregar fuentes personalizadas a WordPress:

1. Descarga la fuente a tu computadora.
2. Por lo general, puede encontrar los archivos de fuentes en un archivo .zip. Sáquelo.
3. Ahora debe cargar el archivo de fuentes (puede usar el cliente FTP o el Administrador de archivos para esto) al directorio wp-content / themes / your-theme / fonts (debe crear la carpeta de fuentes usted mismo si no lo hace) existe). En nuestro ejemplo, cargamos la fuente AguafinaScript-Regular.ttf.
4. Ahora vaya al área de administración de WordPress y abra Apariencia -> Editor . Vaya al archivo style.css. Desplácese hasta la parte inferior de este archivo y agregue el siguiente código (no olvide cambiar la familia de fuentes y los valores de URL para que coincidan con su fuente):

@font-face {
font-family: Aguafina Script-Regular;
src: url(https://www.b-fast.it/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}

Presione el botón Actualizar archivo para guardar los cambios.

El código font-face carga la fuente cada vez que un visitante ingresa a su sitio web. Sin embargo, la fuente aún no se aplica a ningún elemento. Por lo tanto, no verá ningún cambio en la interfaz. Para asignar la fuente a un elemento específico, necesita editar el mismo archivo style.css.

Por ejemplo, para asignar esa fuente a su título (h1) simplemente escriba

h1 { 
    font-family: "Aguafina Script-Regular", Arial, sans-serif; 
    }

Conclusión

Espero que este tutorial te haya ayudado a agregar fuentes personalizadas a tu WordPress .
Para aquellos que no estén familiarizados con CSS, se recomienda utilizar el método con complementos,  ya que es un método más simple y no requiere ningún otro conocimiento de codificación implícito.

Declaración de transparencia: el contenido de B-Fast es compatible con el lector, lo que significa que si hace clic en algunos de los enlaces de esta publicación, es posible que ganemos una pequeña tarifa de referencia. Tenga en cuenta que solo recomendamos productos que usamos nosotros mismos y / o que creemos que agregarán valor a nuestros lectores.

Related Posts