Cómo usar la fuente Proxima Soft en WordPress

Oct 21, 2020 Uncategorized

De hecho, soy un gran fanático de las fuentes y he estado esperando por un tiempo que apareciera una nueva fuente que realmente me gusta. Casi me mudé a Proxima Nova hace unos meses, que es una fuente muy popular. Pero afortunadamente estuve ocupado, ¡porque a partir de enero la nueva fuente Proxima Soft ya está disponible! Vea mis pasos a continuación sobre cómo agrego la fuente Proxima Soft a mi sitio de WordPress y la alojo en mi CDN para un mejor rendimiento.

Proxima Soft

Proxima Soft, no debe confundirse con Proxima Nova, que es una fuente que existe desde hace mucho tiempo y se utiliza en miles de sitios en la web. De hecho, fue votada como una de las fuentes sans-serif más populares por Typewolf.

Proxima Soft es en realidad un versión redondeada de Proxima Nova, creado por el mismo chico, Mark Simonson. Lanzó esta versión nueva y actualizada en enero de 2017. Soy un gran creyente de que una buena fuente puede hacer o deshacer un sitio web cuando se trata de legibilidad. También puede ayudarlo a destacarse entre los cientos de miles de otros sitios que existen. Y cuando vi esta nueva versión actualizada solo tenía que tenerla: guiño:

¿Dónde obtengo la fuente Proxima Soft?

Cuando elijo una fuente de terceros que no sea Google Fonts, obtengo mis fuentes de Fontspring. ¡Estos chicos son simplemente increíbles! Cuando se trata de hacer fuentes web de la manera correcta, estos tipos sobresalen entre todos los demás.

Fontspring: obtén fuentes web increíbles

Este es el por qué:

  • Tienen una biblioteca masiva de todas las fuentes que pueda desear.
  • Tienen versiones de demostración de sus fuentes para que pueda probar antes de comprar. Además, he recibido un reembolso de ellos antes, y fueron geniales al respecto. Su apoyo es asombroso.
  • Les importa el rendimiento y confiar en ti como comprador. Muchos proveedores de fuentes de terceros, como TypeKit y MyFonts, requieren scripts de terceros para funcionar o rastrear su uso. Fontspring no tiene scripts de seguimiento, ni JavaScript, no se requiere nada, aparte de alojar las fuentes usted mismo. Esto es ideal porque tanto TypeKit como MyFonts causan problemas de rendimiento. He usado TypeKit en el pasado, y su servicio en realidad cae mucho más de lo que la gente piensa. Y cuando lo hace, su fuente simplemente se rompe en su sitio.
  • ¡Con Fontspring, pagas una vez y obtienes la fuente para siempre!
  • Todas las fuentes incluyen la capacidad de usar en un cantidad ilimitada de sitios web.
  • ¡Su precio es bastante barato! Puede ponerse en marcha con un nuevo conjunto de fuentes por menos de $ 100. A veces, incluso menos de $ 45 dependiendo de lo que quieras.

Obtener la fuente Proxima Soft en mi sitio de WordPress

Siga los pasos a continuación que utilicé para obtener la fuente Proxima Soft personalizada en mi sitio de WordPress, además de servirla desde mi CDN (KeyCDN).

Paso 1

Lo primero que hice fue ir a Fontspring y comprar las versiones atrevidas y regulares de Proxima Soft. El costo total fue de $ 44,00. Lo bueno es que por cada uno adicional que compre, obtendrá un descuento de alrededor del 50%. Después de comprar sus fuentes, recibirá un correo electrónico con un enlace a los archivos de fuentes.

Paso 2

Cada fuente tendrá diferentes tipos de fuente, como WOFF2, WOFF, TTF, EOT, SVG, etc. Solo me preocupan los navegadores modernos, por lo que estoy usando solo WOFF (ver soporte de navegador WOFF) y WOFF2 (ver soporte de navegador WOFF2).

Paso 3

Luego tomo los archivos de fuentes y los subo a través de FTP a mi sitio de WordPress. Creé una carpeta en la raíz de mi sitio llamada «fuentes». En este ejemplo, estoy usando un KeyCDN para todos mis activos, junto con nuestro complemento Perfmatters para conectar el CDN. Esto copia automáticamente mis fuentes que acabo de cargar localmente en la CDN. La parte importante sobre el uso de una CDN es que está sirviendo todos sus activos desde la misma ubicación, no haciendo referencia a varios dominios (hosts). Aquí es donde también puede ser beneficioso sobre las fuentes de Google.

fuentes locales ftp
Sube la fuente Proxima Soft al sitio de WordPress

Paso 4

Después de haber cargado las fuentes en una carpeta de mi servidor, necesito hacer referencia a las nuevas fuentes en CSS. Hoy en día, muchos temas tienen un panel CSS personalizado, o puede usarlo en el Personalizador de WordPress en «CSS adicional». Luego inserto el siguiente código, haciendo referencia a mi URL de CDN.

@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.woorkup.com/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.woorkup.com/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.woorkup.com/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.woorkup.com/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Luego agrego los siguientes estilos para señalar la nueva familia de fuentes. Aquí hay un ejemplo del código que utilicé.

body {font-family: proxima_softregular; font-size:18px; color:#444;}
h1,h2,h3,h4,h5,h6 {font-family:proxima_softbold; text-transform:none !important; color:#414a51;}

Paso 5

Si su tema de WordPress ya tiene Google Fonts integrado, querrá asegurarse de desactivarlo. De lo contrario, es posible que esté cargando tanto sus fuentes locales como las fuentes de Google.

Para la mayoría de los temas, probablemente deba comunicarse con el desarrollador, quien puede proporcionar rápidamente una función para deshabilitar las fuentes de Google. O consulte su documentación, normalmente se trata de un ajuste muy rápido. Algunos temas pueden incluso tener la opción de activarlos o desactivarlos en el back-end. Nuestro complemento Perfmatters también tiene la opción Desactivar fuentes de Google.

¡Y eso es! Aquí hay una captura de pantalla antes y después.

woorkup Antes con fuente Roboto

Aquí está woorkup antes con la fuente Google Roboto.

woorkup After With Proxima Soft Font

Aquí está el trabajo posterior con la fuente Proxima Soft.

Y en lo que respecta al rendimiento, todavía me queda un sitio bastante rápido, como se ve en mi prueba Pingdom. Sin embargo, esto se debe principalmente a Kinsta (mi anfitrión) y KeyCDN (mi CDN).

Actualizar: Ahora estoy usando fuentes del sistema en este sitio. ¡No tienen gastos generales y se ven geniales!

Resumen

¡Y eso es! Fontspring tiene muchas fuentes, pero estoy investigando la fuente Proxima Soft en este momento. Las instrucciones anteriores también funcionarán con cualquier fuente de terceros. ¿Qué piensas? ¿Tiene una fuente web que ha querido probar?

Luis Miguel

Por Luis Miguel

Content marketing en Iday.es. Me encargo de la creación de contenidos de nuestro propio blog así como el de clientes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *