Cómo usar fuentes descargadas en WordPress sin un complemento

Google Fonts es un recurso asombroso. Antes de que estuviera tan extendido, crear sitios web que usaran fuentes únicas era un verdadero dolor de cabeza. Ahora, sin embargo, con unos pocos clics y un fragmento de código, su sitio web pasa de ser helvético-eh a helvético-asombroso . Pero, ¿qué pasa si la fuente que ama no es parte de la familia Google Fonts? Necesita saber cómo usar las fuentes descargadas porque ha descubierto una fantástica fuente hipster que habla con el alma de su barba.

Usar una fuente descargada en su sitio web no es tan simple como hacer clic, hacer clic, pegar y pegar. No es un proceso difícil, fíjate, y te guiaré a través de él para que nunca, nunca, vuelvas a tener un sitio web Helvetic-eh .

Ahora, quiero señalar que puede hacer esto a través de un complemento. Hay algunos disponibles en el repositorio. Pero, ¿por qué querríamos hacer eso? Soy el tipo de persona que prefiere evitar el uso de un complemento cuando unas pocas líneas de código hacen lo mismo. El exceso de complementos causa toneladas de solicitudes HTTP innecesarias y aumenta la velocidad de su sitio.

Así que vamos a importar estas fuentes a mano, como si volviéramos a ser finales de los 90. Awww, sí.

Elegir y descargar una fuente

Soy un gran fanático de los resúmenes de fuentes. Elegant Themes tiene una tonelada que puedes escanear para ver lo que te gusta. Así que oprima algunos de estos y vea lo que le gusta.

• Fuentes de escritura a mano
• Fuentes retro
• Fuentes de lujo
• Fuentes cursivas
• Fuentes Hipster
• Fuentes divertidas

Para mí, voy con la fuente Aventura del resumen de Hipster.

Su primer paso es encontrar el enlace de descarga de la fuente y guardar el archivo en su computadora. Es probable que sea un archivo .zip que contenga varios formatos de archivo. Los más comunes que encontrará son .ttf (fuente TrueType) o .otf (fuente OpenType).

Hacer una fuente web (algo opcional, pero no realmente)

FontSquirrel tiene una gran herramienta que puede utilizar para asegurarse de que nadie ni ningún navegador quede incompatible con el esplendor de su sitio. Dado que la mayoría de las fuentes que descargue solo estarán disponibles en un formato único, la herramienta FontSquirrel lo hace para que no esté limitado por lo que distribuyó el autor de la fuente. Siempre que tenga los derechos para usar la fuente, puede asegurarse de que funcione con su producto / sitio.

Simplemente cargue su fuente descargada recientemente y elija sus opciones. Personalmente, uso las opciones de Experto , solo para obtener todos los formatos de fuente que puedo. Los otros funcionan, pero no obtienes tantos tipos de archivos, que es el punto de todo el asunto.

FontSquirrel también es increíble porque le proporciona el CSS necesario para importarlos a su sitio. ¿Qué te parece eso de fácil de usar? Simplemente lo copiará y pegará (de lo que tratamos a continuación).

Subiendo su fuente a WordPress

Una vez hecho esto, deberá cargar la fuente a su proveedor de alojamiento. Siempre hago esto a través de FTP (uso FileZilla, pero puedes usar el cliente que quieras).

Si no conoce la información FTP de su host, diríjase a su cPanel y busque en Archivos -> Cuentas FTP .

Verá todas las cuentas FTP para el host allí, y también debería ver un enlace Configurar cliente FTP al lado de cada una.

Cuando ingresa allí, cPanel le brinda información del servidor o un archivo FileZilla (y otros) que puede importar para configurar sus credenciales. Yo opto por el manual, personalmente, pero tú haces lo que te gusta. Incluso si usa el archivo, necesitará la contraseña para iniciar sesión, por lo que ambos métodos son seguros y protegidos.

Ahora que ha iniciado sesión en su host a través de FTP, navegue hasta la carpeta / wp-content de su sitio. Debido a que este es contenido para su sitio de WordPress, ¿por qué no lo pondría allí? Siéntase libre de ponerlo donde sea, incluso en / wp-content / uploads . Tú lo haces tú.

FTP es muy fácil de cargar su archivo. Simplemente busque el archivo de fuente que descargó y arrástrelo al panel inferior derecho en FileZilla. Eso iniciará la carga. No le llevará más de un segundo verlo en el directorio.

Si usó la herramienta FontSquirrel que discutimos anteriormente, también lo hará para todos los archivos de fuentes que descargó de ellos. Simplemente arrástrelos y suéltelos donde quiera almacenarlos.

Usando su fuente con CSS

Su fuente ahora está cargada y acurrucada de manera segura en su cálida y cómoda manta de contenido wp. Es hora de agregar la importación CSS necesaria a su tema.

Dirígete al directorio de tu tema hijo (estás usando un tema hijo, ¿verdad?) En tu cliente FTP y busca el archivo style.css , haz clic derecho en él y selecciona Ver / Editar para que aparezca en tu editor de texto predeterminado.

Si no tiene un tema hijo, use el Creador de temas para niños de Orbisius para hacerlo mega-ultra rápido. Puede eliminar el complemento después. Amo esta cosa.

@Perfil delantero

El código que usamos proviene directamente de FontSquirrel (puede escribir el suyo propio o copiar / pegar el ejemplo a continuación), y todo lo que cambié fue la ruta de carga de la URL para incluir / wp-content . Todo lo demás es lo que proporcionó el generador de fuentes web.

Todo lo que hace este script de @ font-face es decirle a las hojas de estilo de su sitio web, "oye, amigo, voy a poner esta nueva fuente aquí si quieres usarla en algún momento". Ya sabes, algo así como lo haces cuando llevas cupcakes a casa y le cuentas a la gente con la que vives.

Sin @ font-face , si intenta llamar a font-family: 'aventurabold'; por CSS, su sitio no podrá encontrarlo porque nunca se le ha dicho dónde lo guarda.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Guarde el archivo y, dado que lo abrió para editarlo a través de FileZilla, aparecerá un diálogo que le preguntará si desea reemplazar el que está en el servidor. Tu respuesta es, obviamente, sí.

Ahora todo lo que tiene que hacer es ingresar a su custom.css (o si usa Divi, Divi -> Opciones de tema -> CSS personalizado en el panel de navegación de su panel de WP).

Simplemente agregue el estilo CSS como lo haría con cualquier otra fuente. Simplemente reemplacé las fuentes de Google 'Roboto' y 'Exo' que estaba usando con 'aventurabold' , y todo estaba listo (gracias a la importación de @ font-face anterior).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Los frutos de nuestro trabajo

Así es como se veía antes:

Y esto es lo que sucedió después de que agregué Aventura al CSS:

¡Hurra! ¡Funciona! ¡Buen trabajo! ¡Vaya con nosotros!

Luciendo bien, Friendo

Como dijo una vez el capitán Malcolm Reynolds: "Hemos hecho lo imposible y eso nos hace poderosos". Bueno, está bien, entonces cargar una fuente e importarla a través de CSS puede no equivaler a haber hecho lo imposible , pero ciertamente ha hecho algo que muchos usuarios de WordPress no se atreverían a pensar en hacer: agregar una funcionalidad principal sin un complemento.

Y eso, amigos míos, ciertamente los hace poderosos.

Entonces, ¿cuál es tu fuente favorita para usar en la web que no sea una fuente de Google? ¡Cuéntamelo en los comentarios!

Imagen en miniatura del artículo por 32 píxeles / shutterstock.com