Cómo cambiar las fuentes, el color de la fuente y el tamaño de la fuente en WordPress [Actualización 2021]

Cuatro fuentes entran en un bar. El cantinero dice “¡Oi, sal! No queremos a tu chico aquí ‘. Simplemente me gusta ver las fuentes. Me gusta recogerlos, pensando que algún día los usaré en una presentación o en un sitio. Pero tengo un dilema eterno: no tengo idea de cómo combinarlos. Pero una cosa es segura: Arial y Times New Roman ciertamente no son mi especie. ¿Descubriste a tu chico? Colores, otro dolor de corazón. También me gusta explorar diferentes paletas de colores y combinaciones aquí y aquí, pero cuando quiero elegir una combinación de colores para un sitio o presentación, siempre estoy bloqueado en la paradoja …
Ahora, probablemente leas esto porque estás un poco bloqueado. Y no está satisfecho con las corrientes y el color actual del tema de WordPress. Esto significa que ambos necesitamos una mano amiga. Así que hice algunas excavaciones y te mostraré cómo cambiarlas en WordPress. Pero más que eso, lo guiaré para que tome una mejor elección de colores y fuentes. ¿Negocio? Comenzaré con el lado técnico, luego analizaré cómo asociar las fuentes y elegir los colores. Vamos. Cómo cambiar las fuentes globales, el tamaño de la fuente y el color de la fuente en WordPress Customizer Las fuentes globales afectan a todo el sitio web. Por lo tanto, cualquier cambio que realice aquí afectará todas las fuentes de su sitio web. Esto hace que su trabajo sea mucho más fácil. En lugar de moverse de un lado a otro entre las páginas y cambiar las fuentes en el encabezado principal, por ejemplo, puede hacer este cambio en el bloque, a través de la configuración de tipografía global.
Antes de continuar, quiero aclarar que el tamaño de la fuente se refiere a la altura de una fuente. Ahora, vamos al tema Customizer. Ahora, la configuración de fuente global difiere ligeramente de un tema a otro. En mi ejemplo, uso el tema del Colibri junto con las páginas Generador de Colibri. Aquí están los pasos: ingrese el tablero para el administrador de WordPress,
Coloque el cursor sobre “apariencia”,
Seleccione “Personalizar”,
Ir a “configuración general”,
Seleccione “Tipografía”.
En esta sección, puedes:

Títulos de configuración. Hay 6 tipos de títulos en diseño web. H1 es lo más importante, H6 es el menos importante. En este nivel, puede cambiar el tamaño, el peso (o grosor), la familia de fuentes y color. Por ejemplo, cuando cambia el color de su H2, todas las sedes de H2 en su sitio cambiarán su color al momento de publicar el cambio.
Configuración del texto del cuerpo. Todo el texto que no es un encabezado o enlace se considera texto del cuerpo. Como se indicó anteriormente, puedes jugar con la familia Font-Family, el peso y el color.

Personalice el texto que tiene enlaces. Puede cambiar el color o la decoración (por ejemplo: subrayar) si lo desea cuando los enlaces se colocan o se hacen clic / visitan.
Para los títulos, el texto del cuerpo y el texto del enlace, también tiene algunas configuraciones avanzadas que le permiten decidir el espacio entre las letras, la altura de la línea de texto.

Hay más de 200 fuentes disponibles en el tema de Colibri … suficiente, ¿no crees?
Ahora, es importante no mezclar demasiadas fuentes y ser consistente en su uso. Pero cubriremos algunas de las mejores prácticas de casos más adelante. Otra cosa importante es cómo se calcula el tamaño de la fuente. Probablemente los haya notado hasta ahora: las dimensiones de las fuentes se pueden calcular en píxeles (“PX”), “REM” o “EM”. “Pixel (PX)” es un valor estático, que les dice a los navegadores que reproduzcan las letras exactamente a la cantidad de altura de píxeles que especificó. Los valores “EM” y “REM” son valores escalables o relativos. Finalmente, los valores “EM” y “REM” serán traducidos por el navegador a valores de píxeles. Si bien un navegador siempre reconocerá 10 píxeles como 10 píxeles, las dimensiones “REM” y “EM” pueden variar.
Al usar unidades “EM”, el valor del píxel que alcanza es una multiplicación del tamaño de fuente en el elemento que es elegante. La medición de la fuente “REM” representa el tamaño de la fuente del elemento raíz o el valor predeterminado del tamaño de la fuente . La mayoría de las veces, esta dimensión predeterminada es de 16 px. ¿Lo que esto significa? Cuando asigna 2 “REM” para H1, esto significa que serán el doble que el valor predeterminado. Ahora, otra cosa importante es que el elemento raíz hereda su tamaño de fuente en la configuración del navegador.

Espero que no haya hecho tu miseria en tu cabeza ahora. Para simplificar un poco las cosas, ni siquiera debe conocer las dimensiones predeterminadas. Puedes jugar con mediciones “EM” o “REM” hasta que alcances el tamaño deseado. Y luego, puede equilibrar en consecuencia las otras dimensiones del encabezado y los párrafos. Estas mediciones se prefieren a los píxeles, ya que aportan consistencia al diseño y porque son receptivos. No necesitarán ningún estilo adicional en diferentes dispositivos. Ahora, volvamos un poco a los colores de la fuente. Como ya hemos mencionado, en “tipografía”, puede hacer cambios de color en títulos, texto y enlaces. Puede elegir un color personalizado o puede ingresar su propio código de color (a través de HEX o RGB). Además, el tema actual tiene un esquema de color global. Puede agregar más colores o puede cambiar completamente a otro esquema de color. Vaya a “más esquemas” para ver sus opciones.
Ahora, suponga que ha realizado todas las configuraciones de tipografía global. Has decidido la familia de fuentes, el tamaño de la fuente, los tipos de títulos que usarás y sus colores. ¿Ahora que? ¿Cómo puede atribuir el texto a ser un H1 o un párrafo? Hablaremos de esto en el próximo capítulo.
Cómo hacer cambios en las fuentes locales en WordPress (en páginas y / o publicaciones) establecer algunas partes del texto como “párrafos”, “títulos H1”, “títulos H2”, etc. A veces puede ser suficiente para diferenciar entre textos de diversa importancia. La opción está disponible para publicaciones y páginas. Hacer cambios de tema de personalización cuando esté en WordPress Customizer, continúe y seleccione una sección de texto para obtener una vista previa del sitio web. Recuerde, continuamos utilizando el generador de páginas de Colibri. Esto podría diferir ligeramente dentro de otras páginas. En mi ejemplo, selecciono el título principal.

A la izquierda, veré las opciones en el menú para el “encabezado” de edición. Ahora puedo pasar de H1 a otro tipo de encabezado. Si quiero agregar una pieza de texto, que no es un título, puedo ir al personalizador y agregar el componente “Texto”. También habrá una opción de edición para obtener una vista previa del sitio web, que permitirá el tamaño de la fuente, el color de la fuente, el peso y la modificación de la familia de fuentes. Además, desde el menú a la izquierda, puede hacer cambios adicionales, lo que puede cancelar los valores implícitos en la tipografía global.

Aquí puedes:
Cambiar el color de la fuente,
Cambiar la sombra del texto,

Cambiar el tamaño de la fuente,


Cambiar la fuente de familia,
Haga cambios de estilo avanzado en su texto en el estado normal del estado flotante,

Configure un fondo para su texto,
ajustar el espacio y los bordes,
Aplicar efectos (decoloración, deslizamiento, agrandamiento, etc.),
Decida si el texto también debe aparecer en dispositivos móviles (bajo la opción “Responsiva”).

Si desea agregar un nuevo título, debe seguir el mismo flujo: agregue el componente “encabezado”, entonces puede hacer los mismos cambios que anteriormente. Hacer cambios de fuente en el editor de WordPress predeterminado (Gutenberg) ahora, para realizar algunos cambios en la fuente de texto desde una publicación de blog utilizando el editor predeterminado de WordPress. Aquí están los pasos: desde el tablero de WordPress, seleccione “Todas las publicaciones”,
Coloque el cursor por encima del puesto de publicación,
Seleccione “Editar”,
Coloque el cursor sobre un pedazo de texto,
Desde la barra de herramientas que aparece, puede cambiar la alineación del texto, el grosor y también puede asignar tipos de texto: de párrafo a H6.
Desde el menú correcto, puede hacer cambios en el color de la fuente. Puede elegir un color de los sugeridos o puede asignar un color personalizado.
Recuerde acceder a “Actualización” y “Publicación” cuando haya terminado.

Hacer cambios de fuente en el editor de WordPress Classic Los primeros pasos son como en el capítulo anterior:
Desde el tablero de WordPress, seleccione “Todas las publicaciones”,
Coloque el cursor por encima del puesto de publicación,

Seleccione “Editar”,

Coloque el cursor sobre un pedazo de texto,
Desde la barra de herramientas que aparece, puede cambiar la alineación del texto, el grosor y también puede asignar tipos de texto: de párrafo a H6. También puede crear listas ordenadas y desordenadas (es decir, con números o balas).
Actualice y publique sus cambios.
Bastante directamente. Cambie con los cambios CSS ahora, suponga que desea reemplazar la tipografía global en una determinada página que edite. Este método requiere algunos CSS. Puede cambiar el CSS de un sitio web de 2 maneras:
En el archivo style.css del editor de WordPress (aspecto -> editor), no muy recomendable. O en la sección CSS adicional de su personalizador.
Puede afectar ciertas identificaciones, clases o cualquier otro elemento. Pero si eres apasionado de CSS, ciertamente conoces el ejercicio. Realizar cambios de impresión utilizando complementos de WordPress en el caso extremo Cuando la aduana del cliente no le permite realizar muchos cambios de impresión o color, ¿qué más puede hacer? Use complementos de WordPress. Ahora, suponga que desea subir sus propias fuentes personalizadas en cualquier formato. Tengo una recomendación para usted para el complemento: use cualquier fuente. Tiene más de 200,000 instalaciones activas. Admite todos los navegadores importantes, incluidos IE, Edge, Firefox, Chrome, Safari, iOS, Andriod, Opera, etc. Otro complemento que amo es FUENT IMPRESIONANTE. Este complemento condimenta un poco las cosas, lo que le brinda la oportunidad de usar iconos. Estos íconos se comportan exactamente como el texto. Puedes cambiar su tamaño, color. ¿Qué tan fuerte es eso? Font Awesome es una excelente biblioteca de texto que es utilizada por miles de diseñadores web de todo el mundo, dentro o fuera de WordPress. ¿Por qué y cuándo debe cambiar la fuente y el tamaño de la fuente en WordPress? Mejores prácticas de casos. Aquí hay una pequeña lista de verificación que debe considerar al cambiar sus fuentes:
Use la altura de la línea sabiamente (el espacio vertical entre dos líneas de texto). La línea inadecuada de la línea puede tener un impacto negativo en la legibilidad del texto de su sitio web. La altura de la línea también puede mejorar el diseño y puede dar un cierto ritmo a la tipografía. Además, no el tema aquí. Debe considerar el crecimiento, es decir, el espacio entre las letras en un texto. El espacio adecuado de las letras dará como resultado textos más visualmente atractivos y una mejor legibilidad.

El tamaño de la fuente afecta las conversiones. Aunque no hay una fuente ideal para aumentar las tasas de conversión, debe probar algunas variantes de fuentes. El software de número ha cambiado el tamaño de la fuente en Arial 10PT en Arial 13 para, lo que condujo a un aumento del 133% en la tasa de conversión.
Las fuentes tienen implicaciones psicológicas. Kang y Choi se resortaron a personajes condensados, lo que aumentó el rendimiento de las páginas web en un 27%.
En cuanto al peso de la fuente, se ha encontrado que las fuentes promedio son las más legibles.
Cuida el apareamiento de tus fuentes, aquí hay una guía sobre cómo abordar este tema.
Para ver qué fuentes son las más utilizadas, consulte este estudio de la distribución del uso de fuentes.
Otro aspecto importante es la búsqueda de fuentes con los mejores tiempos de carga. Consulte este estudio para ver las primeras 10 fuentes y sus tiempos de carga de la página.
Comprenda cómo funcionan los colores juntos y la psicología a su alrededor en el diseño web.