Cómo usar una fuente personalizada en su sitio web de WordPress

Usar una fuente personalizada en su sitio web de WordPress (o cualquier sitio web) puede ser una tarea complicada y frustrante. Cosas como convertir la fuente a un formato web, cargar los archivos y actualizar los archivos CSS pueden llevar mucho tiempo.

Puede ser un largo camino por recorrer para sobresalir entre la multitud.

Pero hay una manera más fácil de usar una fuente personalizada. Vamos a destacar un complemento de fuente de WordPress llamado Use Any Font , que facilita agregar fuentes a WordPress en minutos.

Los pros y los contras de las fuentes personalizadas

Las fuentes personalizadas son excelentes, pero deben incluir algunas etiquetas de advertencia.

Si sus archivos de fuentes son grandes, tendrán un impacto negativo en la velocidad de carga de la página . Sin mencionar el hecho de que no todos los navegadores web admiten todos los tipos de fuentes . Y luego está el complicado tema de los derechos y las licencias, del que hablaremos en un minuto.

Pero vale la pena superar los obstáculos. Una fuente personalizada puede telegrafiar el propósito o las aspiraciones de un sitio (consciente o inconscientemente). The New York Times Magazine se sometió a un rediseño hace unos años que incluyó el uso de nuevos tipos de letra para darle al sitio "una sensación literaria".

La mayoría de los sitios web de revistas y periódicos usan fuentes personalizadas para distinguirse de la competencia y traducir su apariencia impresa a la web.

Pero no es necesario ser un gran editor para beneficiarse de las fuentes personalizadas. Pueden ayudar a llevar cualquier sitio web de típico a extraordinario.

La tipografía de sitios web ha recorrido un largo camino

La hermosa y variada web que damos por sentado comenzó como un montón de Times New Roman sobre un fondo gris , con alguna que otra imagen de 5 o 10 kb para ralentizar la carga de la página.

La tipografía era aburrida y estándar porque los primeros navegadores web solo podían mostrar las fuentes que estaban instaladas en la computadora del visitante. Eso significaba que si quería que todos los usuarios tuvieran una experiencia consistente, su selección de fuentes era mínima.

La introducción de fuentes web nos liberó de la restricción de mostrar fuentes extraídas del sistema operativo del visitante y cambió la presentación de fuentes al navegador.

Las fuentes web también hacen posible que un sitio use una fuente personalizada única, que no solo es un diferenciador poderoso, sino también una valiosa herramienta de diseño.

Usar una fuente personalizada en su sitio web de WordPress

WordPress tiene muchos complementos que pueden conectarlo con colecciones de fuentes web gratuitas como Google Fonts. El complemento WordPress Jetpack incluso tiene una opción integrada de Google Fonts.

Pero si desea utilizar fuentes personalizadas, necesita un complemento que le permita cargar una fuente en WordPress. Eso es lo que estamos viendo aquí con Use Any Font .

Use Any Font es muy simple, y es de uso gratuito para una sola fuente. Si desea utilizar varias fuentes personalizadas, deberá pagar una clave API premium.

Vamos a instalarlo y te mostraré lo fácil que es configurarlo.

Inicie sesión en su panel de administración de WordPress.

En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

En el cuadro "Buscar complementos...", ingrese "Usar cualquier fuente".

Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

Cuando se haya instalado el complemento, haga clic en el botón "Activar".

Configuración de Usar cualquier fuente

En la navegación de la columna izquierda, haga clic en el enlace "Usar cualquier fuente".

En la sección "CLAVE API", haga clic en el botón "Generar clave API de prueba".

Debe aparecer una clave API en el campo "CLAVE API".

Haga clic en el botón "Verificar".

En la sección "Cargar fuentes", haga clic en el botón "Agregar fuentes".

Introduzca un nombre en el campo "Nombre de fuente". Esto es para su referencia. Puede ser cualquier cosa que quieras.

En la sección "Archivo de fuente", haga clic en el botón "Elegir archivo". Seleccione un archivo de fuente.

Debajo del botón "Cargar", verá: " Al hacer clic en Cargar, confirma que tiene los derechos para usar esta fuente".

Antes de continuar...

Hablemos de derechos

El hecho de que exista la tecnología para usar cualquier fuente en su sitio web no significa que deba hacerlo. Muchas fuentes tienen licencia para su uso en su computadora, pero no para otras aplicaciones. Esto a menudo incluye la incrustación en su sitio web.

Hay muchas cosas relacionadas con la concesión de licencias de fuentes . Pero lo más probable es que, a menos que pague por una fuente (y la licencia que pagó incluye incrustar la fuente en una página web), probablemente no tenga derecho a usarla en su sitio web.

Las fuentes, como cualquier otro trabajo creativo, están protegidas por leyes de derechos de autor. Si quieres respetar esas leyes depende de ti, por supuesto. Personalmente, recomiendo respetar todas las leyes. Es la mejor manera de mantenerse fuera de los tribunales.

Es posible que no piense que usar una fuente en su sitio web podría llevarlo a problemas y, de manera realista, probablemente tenga razón. Pero las personas que fueron demandadas por la RIAA en 2003 pensaron que descargar un MP3 de Backstreet Boys también era inofensivo.

Una vez más, depende de usted. Pero los artistas (y crear fuentes es un arte) también tienen que comer. Sea genial y asegúrese de que está utilizando fuentes de licencias adecuadas en su sitio web. Si no quiere pagar por el privilegio, hay muchas fuentes web y de WordPress gratuitas .

El uso de una fuente personalizada de WordPress realmente puede hacer que su sitio se destaque. Solo asegúrate de hacerlo de la manera correcta.

Ahora, de vuelta a nuestra programación regular.

Continuar con la configuración Usar cualquier fuente

Para este tutorial, estoy usando una fuente hecha con mi letra, que tengo derecho a usar en cualquier lugar que desee.

Una vez que se selecciona el archivo de fuente, haga clic en el botón "Cargar".

En la sección "Asignar fuente", haga clic en el botón "Asignar fuente".

En la sección "Asignar fuente", seleccione su fuente del menú desplegable. Luego, elige qué elementos te gustaría aplicar.

Desplácese hacia abajo y haga clic en el botón "Asignar fuente" en la parte inferior de la sección. Tenga en cuenta que el botón "Asignar fuente" en la parte superior no guardará la selección.

Ahora las páginas de su sitio web utilizarán la fuente personalizada para cualquier elemento que haya especificado.

Haga que su sitio web se destaque entre la multitud

De acuerdo, probablemente no quieras usar algo tan inusual como una fuente manuscrita para todo el texto de tu sitio. Pero una fuente distintiva y diferente puede hacer que su sitio web se destaque.

Sin embargo, asegúrese de tener en cuenta el rendimiento. Hay un costo por ser diferente, y no desea que ese costo ralentice demasiado la carga de su página. Si su sitio se siente lento después de implementar fuentes personalizadas, busque una tipografía diferente.

Si su sitio de WordPress es lento o lento, también puede ser hora de encontrar un mejor proveedor de alojamiento web. La plataforma GreenGeeks está optimizada para WordPress . Si está buscando un rendimiento de primera línea, no busque más.

Dato curioso para sorprender y molestar a tus amigos: ¿sabías que el término correcto para lo que ahora llamamos fuente es realmente tipo de letra ? Así es. Times New Roman es un tipo de letra , pero los diferentes tamaños y pesos del tipo de letra son fuentes diferentes .

Entonces, la negrita Times New Roman es una fuente diferente a la cursiva Times New Roman. Y Times New Roman de 12 puntos es una fuente diferente a Times New Roman de 18 puntos.

La terminología se remonta a los días de la impresión con tipos de metal. En estos días, solo los diseñadores gráficos mayores o las personas que todavía imprimen con tipos de metal hacen la distinción. Pero ahora sabes la diferencia.

Y cuando se trata de Jeopardy , sabrás cómo responder.

Y ahora sabe cómo agregar una fuente a WordPress, lo cual no es poca cosa y es una habilidad mucho más útil que la capacidad de responder preguntas en Jeopardy .

¿Ha implementado una fuente personalizada en un sitio web antes? ¿Crees que el aumento en el tiempo de carga de la página vale la pena el impulso del diseño?