Ep 62 | Cambiar la tipografía en WordPress

En el episodio 62 de WordPress Semanal hablaré de la importancia de elegir la tipografía correcta para tu web y de cómo puedes cambiarla. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin, porque ya sabes que no hay mayor satisfacción que la de crear y gestionar tu propia página web con WordPress. Y el episodio de hoy, así como todos los contenidos de mi web, están pensados precisamente para ello, para que aprendas WordPress, para que vayas mejorando y para que descubras cosas que antes no conocías. Y por eso precisamente hoy vamos a hablar de cómo cambiar la tipografía en WordPress de forma sencilla. Porque se puede hacer por código y cuando creas themes y demás, pues hay que incluir la tipografía que tú quieres. Y además tú después puedes cambiarla si sabes código, que de hecho es algo que trataremos en la zona código, y os enseñaré a hacer esto mismo de forma manual. Pero hoy quiero explicaros cómo podéis hacerlo de forma sencilla, que hay un montón de alternativas, me refiero a plugins, con las que lo podemos hacer y además vamos a hablar un poquito de tipografías en general. Pero antes, ¿Qué está pasando por Gonzalo Navarro? Es bueno, por Gonzalo Navarro, solo que ha estado malo de la garganta, pero me he recuperado justo para poder grabar el podcast, así que perfecto. Y en lo que respecta al esfuerzo, ahí tenemos como novedades un nuevo vídeo de la zona código en la que te explico cómo crear botones con CSS y de forma muy sencilla, además, absolutamente desde cero. A veces me preguntáis si los vídeos de la zona código van a ser difíciles de seguir. Si, no, yo lo hago todo como si tú no tuvieses ni idea, porque lo que vemos realmente son cosas que te encuentras en el día a día que necesitas. Por ejemplo, yo quiero ahora poner un botón aquí, pero no quiero que sea el que trae mi thin por defecto, Quiero que sea pues un botón verde con el texto blanco y que sea de un tamaño concreto y que vaya aquí y que funcione así, y que cuando pase el ratón por encima, en vez de ponerse negro, que se ponga gris, lo que sea. Pues todo eso te enseño yo a crear tu propio botón para que después tú lo puedas utilizar cuando quieras. Y además te enseño a utilizarlo, no te enseño solo a crearlo, sino después a utilizarlo donde tú quieras. Este y otros vídeos de la zona Código los puedes ver yendo a GonzaloNavarro es códigos. Ya sabéis que esto es parte de la suscripción a mis cursos, que además incluí esta opción, que tenéis un vídeo semanal, aparte de los cursos mensuales, del soporte y de las descargas premium de forma gratuita. Eso en cuanto a lo que está pasando por mi web y por mí mismo. Y ahora sí, vamos con el plugin de la semana, que es un plugin que te va a permitir ocultar notificaciones del admin, es decir, de tu área de trabajo, de tu escritorio donde estás trabajando con WordPress. Y esto sirve en muchos contextos. Por un lado si tienes clientes que están hartos de las notificaciones que reciben cada vez que acceden a su WordPress, o si por otro lado tú mismo estás hasta el gorro de esas notificaciones, pues si estás en alguno de esos dos casos, el plugin Hide All Notices puede venirte como anillo al dedo. ¿Por qué? Porque el desarrollador lo creó específicamente para eso. Él asegura que creó el plugin porque le producía muchísima irritación el hecho de ver las notificaciones y sobre todo de tener que decirle a sus clientes que no se preocuparan por ellas. Entonces, el plugin básicamente ¿Qué es lo que hace? Pues esconde los avisos básicos de WordPress, como Haz una copia de seguridad antes de actualizar esto, o las notificaciones que los Teams lanzan, por ejemplo. Por ejemplo, algunos themes te es recomendable que instales este plugin. Y también esconde los avisos generales que dan los plugins. Así que básicamente Hidrull Notices, que es como se llama el plugin, simplemente oculta los avisos por CSS, pero lo que pasa es que oculta los que están hechos de forma estándar, porque hay algunos plugins que no utilizan el formato estándar de enviar los avisos y esos avisos no se van a poder ocultar con este plugin. El desarrollador dice que está trabajando en ello para, por lo menos los más importantes, poder también ocultarlos. ¿Pero algunos ejemplos de avisos que no se van a ocultar son los que emiten el plugin Itheim Security Dashboard y por ejemplo el plugin Visual Composer, pero en la mayoría de ocasiones sí que te va a funcionar, vale? Os dejo el link en las notas del programa. Este es el episodio 62. Y ahora ya sí vamos con el tema central del programa que es cómo cambiar tipografías en WordPress. Primero os quiero avisar que yo en esto no es que tenga un gusto especial, ni que sea un experto en tipografías ni en nada de esto, pero como me veo en la tesitura muchas veces de elegirlo para mis propias webs o para las que hago para clientes, pues sí os quiero explicar, digamos en primer lugar una serie de criterios que yo seguiría a la hora de elegir una tipografía y después sobre todo lo que quiero hacer más hincapié es en la parte técnica. ¿Cómo podéis hacer todo esto? Vamos a partir de algunas premisas. Imagina que has comprado el theme que te gusta o que lo tienes ya desde hace tiempo, pero la tipografía con la que viene ese theme o la que utiliza ese theme no te gusta o te gustaría incluir otra más para ponérselo por ejemplo por a los títulos o algo así. En primer lugar no te recomiendo que hagas muchas mezclas de tipografía, cíñete a una o dos, porque después lo que tú puedes hacer con una tipografía es crear variantes. Si tú aumentas el tamaño de esa tipografía, el grosor de esa tipografía, si lo pones en cursiva, si juegas con ese tipo de cosas, te puede crear un efecto totalmente distinto al que te aporta tu tipografía de primeras. Vale, pues en el caso de como digo, que tú quieras cambiar la tipografía o añadir otra, estos son los pasos que yo seguiría. Por un lado una una tipografía legible. Sé que muchas veces puede ser que veas una tipografía y que digas wow. Es una pasada, tiene un montón de cositas redondas, tiene un montón de detalles y esta tipografía está muy chula, sí, pero imagínate leerte un post entero con esa tipografía, seguramente te acabes cansando. Entonces necesitas encontrar un equilibrio, que sea elegante, que sea bonita, que cumpla a lo mejor con la idea que tú tienes o que quieres transmitir en tu web o en tu negocio online, pero sobre todo tiene que ser legible. ¿Lo más importante una tipografía es que sea legible, sino para qué nos sirve? Sobre todo si es para un texto largo, si quizás es para el logo de tu web, por ejemplo, ahí ya es diferente, aunque también siempre ten en mente que debe ser legible si no se entiende para qué la quieres. Después una cosa importante es que contenga todos los caracteres, porque puede ser que esté pensado por ejemplo una tipografía para los de habla inglesa, con lo cual hay varias cosas que no vas a tener. Por ejemplo, no vas a tener el símbolo de apertura de la interrogación, no vas a tener la ñ, es decir, va a haber algunos caracteres básicos que no vas a tener. Esto lo tienes que tener en cuenta porque quizás no lo piensas y después te puedes encontrar que estás intentando escribirlo. A mí me ha pasado, sobre todo cuando he estado diseñando alguna imagen que he utilizado tipografías raras que me gustaban, pues he intentado poner el símbolo de apertura de la interrogación y me he dado cuenta de que no existía, de que no me hacía caso. Atento a esto porque te puede pasar. Que esté preparada para dispositivos móviles. ¿Bueno, en general todas están preparadas, pero esto qué quiere decir? Que va un poco en la línea de la legibilidad, que sea lo suficientemente legible como como para que en dispositivos móviles se vea de forma perfecta. Después he comentado esto de pasada, pero que case con tu marca. Parece una tontería, pero dependiendo de lo que tú transmitas, si por ejemplo tú transmites perfección, limpieza, lo que sea, pues vas a tener que buscar una tipografía así, por ejemplo una tipografía muy sencilla. Ahora, si tienes una web súper rockera, que es de impacto, que todo llama mucho la atención, pues quizás necesites también una tipografía que vaya en esa línea, que sea más de impacto, que sea por ejemplo más recta en lugar de redondeada. El color correcto. El color es una cosa importantísima. Por favor no vayas a poner colores raros, porque al final lo que se lee bien es el color oscuro, negro o gris oscuro sobre blanco. Hay muchísimos estudios por ejemplo que aseguran que si pones el fondo negro y después letra blanca que te vas a cansar rapidísimo. Lo puedes hacer para por ejemplo un destacado o para algo así en concreto, pero para por ejemplo leer un post entero esto sería una locura. Aquí ya no estamos eligiendo el tipo de fuente, pero sí que algunas cosas que van en la misma línea sobre cómo utilizar esa fuente que vayas a elegir. Y por último, que sea accesible. Esto es algo importante y que no se presta demasiada atención. En general las tipografías más importantes son accesibles. Accesible quiere decir es que si alguien tiene un problema, por ejemplo de vista que pueda ver bien esa tipografía que tú has elegido. Y esto tú dirás, ¿Cómo lo puedes comprobar? Bueno, por un lado puedes ver, buscar tipos de fuente accesibles en Google y por otro lado hay un servicio, es un software gratuito que está tanto para Windows como para Mac, que os dejo el link en las notas del programa, que se llama Color Oracle y que puedes descargartelo y ahí vas a ver cómo vería una persona con problemas de vista tu tipografía, con lo cual puedes comprobar por ti mismo la accesibilidad real de la fuente que estás utilizando. La accesibilidad además es un tema muy interesante que cada vez más gente tiene en cuenta dentro del mundo WordPress, que cada vez hay más gente trabajando en ello dentro del mundo WordPress, en las webcams hay ponencias sobre ello. Si te vas a la parte de Make WordPress Org, que es donde tú puedes ayudar a crear cosas en WordPress, puedes ayudar en un montón de aspectos, en traducciones, en el marketing que se hace de WordPress, en el propio core, es decir, ayudar con el código de WordPress, pues una parte importante también ahí es la accesibilidad. Así que bueno, estos son unos criterios que a priori puede parecer que son muy obvios, pero que muchas veces la estás eligiendo y no piensas en ello, piensas esta es la más bonita, esta es la que voy a usar y ahora sí, ¿Cómo podemos cambiar la tipografía de nuestro Word WordPress sin volvernos locos, sin que sea imposible, sin que nos pongamos a tocar código y la liemos? Pues lo podemos hacer con cinco servicios que te voy a comentar y uno muy interesante que va relacionado, pero no es específicamente para cambiar la tipografía, pero sí que te va a parecer interesante, estoy seguro. Entonces, el primer plugin del que vamos a hablar se llama Font Organizer y como su nombre indica, pues te permite organizar las fuentes en tu WordPress, es completamente gratis, no tiene una parte que sea pro y te permite, lo puedes hacer, subir fuentes que tú te hayas descargado de cualquier página, es decir, fuentes que tú tengas en tu ordenador, tipografías que hayas encontrado y que tengas y que quieras incluir, pues puedes subirlas e incluirlas. Puedes usar Google Fonts, que ya sabéis que, o si no lo sabéis, tienes un montón de fuentes y además son fuentes muy estándar porque con Google Fonts no vas a tener problemas, se va a ver bien en cualquier lugar, en cualquier navegador, y todo el mundo va a poder bien, va a poder ver bien la fuente que tú elijas, así que en ese sentido no hay problema. Por un lado la fuente que tú quieras, es decir, si tienes una en tu ordenador, te la has descargado o lo que sea, la subes y la puedes utilizar o si no puedes utilizar también una de Google Fonts. El objetivo de este plugin es que todo esto sea muy sencillo de hacer. Este plugin la verdad es que está muy bien porque las cosas que vayas a hacer las haces en un par de clics, no tienes que saber código, no tienes que hacer nada, puedes incluso subir varias fuentes a la vez, puedes Además te permite aplicar esas fuentes a determinados elementos generales de tu web, cosa que también está muy bien porque puedes decir, vale, esta fuente quiero que se aplique a esto y esta otra quiero que se aplique a esto otro y luego si usas Tiny Advance, que es un plugin sobre el que hablo mucho, que mejora el editor de WordPress, pues vas a poder elegir también esa fuente que has instalado, la vas a poder elegir desde ahí, ¿Vale? Es un plugin que está bien escrito, que es bastante popular, que tiene buenas valoraciones, además tiene soporte y demás, está súper bien, lo recomiendo. Os dejo el link en las notas del programa, se llama Font Organizer y además tiene una demo en su la página del plugin para que podáis ver cómo es antes de utilizarlo. Vamos con el siguiente que es uno parecido que se llama Use Any Font, pero aquí por ejemplo solo puedes utilizar una fuente para las demás, este es mucho más popular, tiene 100.000 instalaciones activas porque funciona muy bien. Este sirve para que subas, básicamente es más. ¿Es más básico, es para que subas la fuente que tú quieras y la puedas utilizar en tu web, vale? Simplemente hace eso, es tenerla disponible en tu web para ser utilizada. Digamos que lo que hace es sustituir el proceso manual que tú harías para en un thing colocar una fuente y que esté disponible en ese thing, pues esto sustituye ese proceso manual y te permite hacerlo con el plugin. Como digo, la parte gratuita te permite hacerlo con una fuente y después tiene planes desde 20 dólares hasta 100 para conseguir la API Key y poder poner más fuentes, más tipografías. Hay un vídeo de instalación sobre cómo utilizar este plugin en la página del plugin, ¿Vale? Que os lo dejo en las notas del programa. De nuevo se llama Use Any Font. Vamos con el siguiente que este es específico. El plugin se llama Typekit Fonts for WordPress y es específico para utilizar fuentes de Typekit. Typekit es un servicio de Adobe en el que tienes muchas fuentes, ¿Vale? Entonces son gratuitas y las puedes emplear para lo que quieras. Pues lo que te permite este plugin es que instalándolo puedas elegir desde un selector. Este ya no es como los anteriores en los que tú subes tu propia fuente o tú añades tu propia fuente de Google Fonts, sino que en este caso lo lo que haces es elegir de las fuentes disponibles de Typekit, elegir la que tú quieres utilizar. Esto en términos de rendimiento es peor que en los otros, porque en los otros tú subes una fuente y ya está. Aquí sin embargo tienes todas esas fuentes y tú eliges la que tú quieras. Con lo cual esto en términos de rendimiento siempre va a ser peor que lo otro en el que tú subes simplemente lo que necesitas y ya está. Pero está muy bien, ¿Por qué? Porque tienes acceso a toda la librería o a toda la galería de fuentes de Type Font de Adobe, que son un montón y tiene una variedad tremenda. Y por supuesto también tienes fuentes gratuitas, pero también tienes fuentes de pago y si ya habías comprado alguna, pues esto te va a permitir añadirlo de forma sencilla a tu WordPress. ¿Qué más? Hemos hablado un poquito de Google Fonts y en este caso os voy a recomendar un plugin para que puedas precisamente utilizar cualquier fuente de Google Fonts en tu web. Este plugin tiene más de 300 mil instalaciones activas, así que fijaos lo popular que es y simplemente puedes elegir la fuente que quieras. Google Fonts Tiene más de 600 tipografías disponibles, incluidas variantes, y con este plugin puedes elegir la que quieras. Además, ¿Qué cosas buenas tiene este plugin? Pues que te permite previsualizar en tiempo real porque se integra en el personalizador de WordPress, Entonces te permite ver cómo quedaría tu web con una fuente en concreto, con lo cual antes de guardar los cambios puedes ver cómo queda tu web. Eso es muy interesante y está muy bien. Como lo demás, no necesita saber código ni nada, es muy sencillo de utilizar y tiene algunas cosas interesantes, como por ejemplo si la fuente de Google Fonts se actualiza, pues el plugin te la actualiza automáticamente, no tienes tú que hacer nada. Pero básicamente la parte, la mejor parte, la más interesante para mí es que puedes desde el personalizador controlarlo y ver cómo queda tu web y después una vez lo tengas, pues dejarlo listo, guardarlo y que ya se apliquen los cambios de verdad. Y el último plugin que vamos a ver se llama Font Resizer y esto es muy interesante porque habéis visto alguna vez que entráis en algún periódico, me refiero online, y tenéis la opción de ir aumentando el tamaño de letra o de ir disminuyéndolo en función de vuestras necesidades, de lo que prefiráis. Pues este plugin hace precisamente eso, te instala un widget que tú puedes colocar en cualquier área de widget que tengas en tu web y entonces tus lectores van a poder, cuando estén leyendo cualquier contenido, van a poder elegir cómo quiere de grande el tamaño de letra. Esto es muy interesante sobre todo para otros dispositivos, porque al final cuando alguien está leyendo en el móvil o está leyendo la tablet, que pueda aumentar el tamaño de letra si así lo quieres, incluso en el ordenador. Yo muchas veces tengo que aumentar el tamaño de la pantalla, tengo que ir haciendo zoom porque me encuentro con texto muy pequeño y yo veo perfectamente, pero hay veces que hay páginas que están así, vamos, que tienen mucho blanco alrededor o muchas cosas alrededor y el texto en medio es súper pequeñito y a veces que tengo que ampliarlo. Pues esto puede aportar una mejor experiencia de usuario para tus lectores. De nuevo el plugin se llama Font Resizer, lo podéis encontrar en las notas del programa de nuevo episodio 62. Y un último apunte en concreto para los usuarios de Genesis, me he dado cuenta que el curso tiene muchísimo éxito, que muchos de vosotros utilizáis Genesis para crear vuestra página web o vuestras páginas web que alguno de vosotros creáis, también otras para clientes o para distintos proyectos que tenéis personales. Pues en el curso vemos como con Genesis Extender, que está disponible, es un plugin que como su nombre indica, extiende las posibilidades que tienes con Genesis, pues con ese plugin tenéis incluida la posibilidad de elegir cualquier fuente de Google Fonts y te dejo un link en las notas del programa donde te enseño cómo configurarlo, cómo habilitar esta opción para tú poder utilizar cualquier fuente de Google Fonts. Y en otra lección en la que vemos cómo editar el CSS y demás de forma sencilla con un cuadro de ayuda que es muy interesante, si no lo habéis visto, echadle un vistazo, pues os dejo el link también en esa lección, a esa lección donde os explico cómo hacer efectivo, digamos, el uso de esa fuente de Google Fonts. Así que al final el tipo de letra que elijas para tu web puede tener un efecto bastante importante en términos de diseño y y de legibilidad. Y esto al final va a afectar a la opinión de tus lectores sobre tu web y al tiempo que pasen en ella. Y el tiempo que pasan tus lectores en tu web es importante, afecta muchos factores, entre otros al SEO. Así que al final todos los detalles de una web son importantes, todos están relacionados. Tampoco te puedes volver loco con todos los detalles, no te puedes volver loco con que tu web sea la más rápida del mundo, porque a lo mejor al intentar hacer eso, pues estás quitando otras cosas que son importantes. No te puedes volver loco tampoco con el tema de las fuentes de es que me gustaría que esto fuese, yo que sé tuviese una esquina un poquito más redondeada, simplemente tener todo en cuenta, pero sin volverte loco, porque si no al final estarías toda la vida retocando cosas y demás. Y lo importante es moverte hacia adelante. Así que también esto hay que tomárselo con tranquilidad y darle la importancia relativa que tiene. Así que nada más, recuerda que puedes hacerte suscriptor para acceder a todos los cursos sobre WordPress, a las descargas de plugins y themes premium que vemos en los cursos y algunos regalitos que voy haciendo a soporte personalizado por correo electrónico y a un vídeo a la semana para personalizar tu web a través de código, que ya hemos dicho que esta semana hemos visto cómo crear tus propios botones para después utilizarlo donde tú quieras y además desde cero. No tienes que tener ni idea de código, ni falta que hace, porque simplemente vamos a ir utilizando lo que necesitemos en cada caso. Y nada más, si te ha gustado el episodio de hoy, quieres ayudarme a que siga creciendo, a que siga llegando a más gente, a poder estar ahí, ya sabes que te agradezco muchísimo una valoración en iTunes porque me ayuda un montón. Y si sigues el link que te dejo en las notas del programa, no vas a tardar nada. Simplemente haces clic, vas a reseñas y dejas la reseña que te apetezca. Y si me escuchas de ivoox, ya lo sabes, también te agradezco muchísimo tus comentarios y tus me gusta. Nos seguimos escuchando. Adiós.