En esta guía, te contaremos cómo agregar nuevas fuentes en WordPress.
Seamos realistas, a todos nos encantan los blogs y sitios web con fuentes sabiamente elegidas. No solo hacen que todo el sitio sea atractivo, sino que también enganchan al usuario con su contenido.
Sin embargo, la elección de las fuentes de WordPress es limitada y depende del tema que estés utilizando. Lo bueno es que puedes agregar fuentes personalizadas a WordPress de manera manual o haciendo uso de algunos plugins que veremos aquí.
Elige la fuente a usar en WordPress
Hay varios sitios web desde los que puede obtener fuentes web gratuitas. Por ejemplo, Google Font Service es un servicio gratuito de fuentes proporcionado por Google y tiene fuentes en más de 135 idiomas. Edge Web Fonts, por otro lado, es un servicio gratuito de fuentes 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. Debemos dejar claro que no todas las fuentes que existen son compatibles con los navegadores web. Pero no te preocupes, incluso si la fuente elegida no es compatible, aún puedes convertirla a un formato compatible.
Es conveniente, que antes de convertir fuentes de un formato a otro, echemos un vistazo rápido a los diferentes formatos de fuente.
Fuentes Open Type o de tipo abierto
Abreviadas como OTF, estas son las fuentes web más utilizadas y son una marca registrada de Microsoft. Funcionan bien con casi todos los principales navegadores.
Fuentes True Type o de tipo verdadero
También conocidas como TTF, estas fuentes fueron desarrolladas por Microsoft y Apple en la década de 1980 y se usan ampliamente para los sistemas operativos Windows y Mac. Son compatibles con los principales navegadores.
Fuentes Web Open o de fuente abierta web
Las fuentes WOFF se utilizan mucho en las páginas web y están recomendadas por W3C. Estas fuentes son las más utilizadas en diseño web porque son compatibles principalmente 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 Embedded Open o de tipo abierto incrustadas
Este tipo de fuentes OTF son compactas y se utilizan como fuentes incrustadas en páginas web y son compatibles con todos 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 Web Font Generator. Esta herramienta le permite convertir fácilmente cualquier fuente a un formato compatible con la web:
- Acceda a la herramienta Generador de fuentes web.
- Presione el botón Cargar fuentes para cargar su fuente y aceptar que las fuentes son legalmente adecuadas para la incrustación web.
- Presione el botón Descargar y guarde el archivo .zip en su computadora.
- 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 plugins
Los plugins 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 plugin WP Google Font para fuentes. Este plugin 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 plugin desde el directorio oficial de plugins de WordPress y abra la nueva sección que se creará en el panel de control 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 el estilo de fuente, los elementos asignados, etc.
Usar cualquier fuente
Si quiere añadir cualquier fuente use Any Font es otro plugin a través del cual puede agregar fuentes a su sitio web de WordPress.
Puede instalar este plugin desde el directorio oficial de plugins de WordPress. Una vez que se complete la instalación, vaya a la sección Usar cualquier fuente y 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.
Añadir nuevas fuentes en WordPress a mano
Si no desea sobrecargar su WordPress con plugins, 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.
- Sigue estas instrucciones de cómo agregar nuevas fuentes en WordPress:
- Descarga la fuente a tu computadora.
- Por lo general, encontrarás los archivos de fuentes en un archivo .zip. Descomprímelos.
- Ahora necesitas cargar el archivo de fuentes (puedes usar el cliente FTP o el Administrador de archivos para esto) al directorio wp-content / themes / your-theme / fonts (tienes que crear la carpeta de fuentes tu mismo si no existe ). En nuestro ejemplo, cargamos la fuente AguafinaScript-Regular.ttf.
- Ahora verás al área administrativa de WordPress y abre Apariencia -> Editor. Ve al archivo style.css. Desplázate hasta el final de este archivo y agrega el siguiente código (no olvides 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;
}
Presiona el botón Actualizar archivo para guardar los cambios.
El código font-face carga la fuente cada vez que un visitante entra a tu sitio web. Sin embargo, la fuente aún no se aplica a ningún elemento. Por lo tanto, no verás ningún cambio en el front-end. Para asignar la fuente a un elemento específico, debes editar el mismo archivo style.css.
Por ejemplo, para asignar esa fuente a tu título (h1) simplemente escriba
h1 {
font-family: «Aguafina Script-Regular», Arial, sans-serif;
}
Conclusión
Espero que este tutorial te haya ayudado a saber
Para aquellos que no estén familiarizados con CSS, recomendamos que utilicen el método con plugins, ya que es un método más simple y no requiere ningún otro conocimiento de codificación implícito.
