Las fuentes pueden marcar la diferencia entre un sitio web aburrido y uno hermoso. Al aprender a cambiar la fuente en WordPress, puede hacer que su sitio se vea moderno, profesional y de marca.
Pero, ¿cuál es la mejor manera de usar las fuentes en su sitio de WordPress, y cómo elegir las fuentes adecuadas para su diseño?
En esta guía, le explicaré todo lo que necesita saber sobre las fuentes en WordPress. Aprenderá acerca de:
Fuentes: La Terminología
Empecemos por mirar la terminología sobre las fuentes en la web.
- Las fuentes Web (alias fuentes HTML) son fuentes alojadas en un sitio Web de terceros y vinculadas a su sitio.
- Las fuentes alojadas localmente son precisamente eso (alojadas en los servidores de su sitio web).
- Las fuentes seguras para la Web son una gama limitada de fuentes que están preinstaladas en (casi) todas las computadoras y a las que puede estar seguro de que todos sus visitantes tendrán acceso.
Echemos un vistazo a las opciones para agregar fuentes a su sitio web.
¿Cómo agregar fuentes a su sitio de WordPress? (las Opciones)
Antes de saltar a la hora de añadir fuentes a su sitio, es útil que comprenda las opciones que tiene a su disposición.
Las fuentes son parte del diseño de su sitio, así que en la mayoría de los casos, serán codificadas a través de su tema – pero no siempre. En algunos casos, puede decidir utilizar un plugin para habilitar una gama más amplia de fuentes en su sitio.
Aquí están algunas de las opciones disponibles para usted:
- Uso de fuentes web como Google Fonts mediante la instalación de un complemento que le da acceso.
- Usar fuentes web codificándolas en el tema y encolándolas (no es tan difícil como parece).
- Alojamiento de sus fuentes en su propio sitio web y añadirlas a su tema.
Hay dos distinciones principales: si utiliza fuentes web, que están alojadas fuera de su sitio, o si decide alojar sus archivos de fuentes usted mismo. En esta guía, veremos los pros y los contras de cada uno.
Comencemos por ver las fuentes web: por qué puede elegir utilizarlas y las formas de añadirlas a su sitio.
Uso de fuentes web en WordPress
Las fuentes web son la forma más popular de añadir fuentes a su sitio web porque facilitan la adición de una amplia gama de fuentes.
¿Qué son las fuentes Web?
Las fuentes web son fuentes que se alojan en el sitio web de un proveedor externo. En lugar de copiar los archivos a su propio sitio, se enlaza con el sitio web del proveedor y se extraen de allí.
Esto significa que usted tiene acceso a una gran variedad de fuentes sin tener que usar el espacio del servidor en su propio hosting. También significa que si los archivos de fuente cambian con el tiempo, no tiene que actualizar sus archivos y tendrá acceso automáticamente a las nuevas versiones de los archivos del proveedor.
Las fuentes web pueden ser gratuitas o puede pagarlas, normalmente a través de una suscripción. Algunos proveedores populares lo son:
- Google Fonts. El mayor proveedor de fuentes web gratuitas. También puede descargar todas sus fuentes a su computadora, es decir, si desea crear materiales fuera de línea utilizando las mismas fuentes que su sitio web, puede hacerlo. Y todo es gratis.
- Fuentes web de Adobe Edge. Estos también son gratuitos. Aunque están diseñados para ser utilizados con productos de Adobe, funcionan bien en cualquier sitio web.
- Fonts.com es un proveedor premium de fuentes, que puede necesitar utilizar si tiene que hacer coincidir su fuente web con una fuente de su material impreso y la fuente no está disponible a través de un proveedor gratuito.
- fontfabric es un diseñador de fuentes que proporciona fuentes premium para su uso como fuentes web y en línea. Tendrá que pagar por ellos, pero obtendrá algo más individual que si utiliza fuentes de Google.
Todos estos proveedores le permiten servir las fuentes directamente desde sus servidores añadiendo código a su sitio de WordPress o a veces usando un plugin que significa que no tiene que añadir ningún código.
Las fuentes web son diferentes de las fuentes seguras para la web. Puede utilizarlos como respaldo para las fuentes web en caso de que el visitante de su sitio web no pueda conectarse a la fuente web por alguna razón. Le mostraré cómo hacerlo más adelante en este post.
¿Por qué usar fuentes Web?
Así que ahora que sabe lo que son las fuentes web, ¿por qué elegiría usarlas en lugar de alojar sus propias fuentes?
Aquí están algunos de los beneficios:
- Facilidad: añadir algunas líneas de código o instalar un plugin es más rápido que descargar y cargar los archivos de fuentes y facilita el cambio de las fuentes si así lo decide en el futuro.
- Rango de fuentes: hay miles de fuentes disponibles como fuentes web y la lista crece constantemente.
- Actualizaciones: Si el archivo de fuente necesita ser actualizado, tal vez para agregar fuentes variables (más de las cuales en breve) o para agregar caracteres adicionales, su sitio tendrá acceso a la nueva versión sin que usted tenga que hacer nada.
La mayoría de los sitios web utilizan fuentes web, con una fuente segura para la web como respaldo. Y con WordPress, es muy fácil de hacer.
Encontrar las mejores fuentes Web para su sitio
Una vez que ha decidido que va a usar fuentes web, ahora tiene que tomar una decisión difícil: ¿qué tipo de fuentes usar?
En los buenos tiempos, cuando todos los desarrolladores web tenían acceso a las fuentes web seguras preinstaladas, esta fue una decisión muy fácil. ¿Quería usar una fuente con gracias o sans-serif? (Las fuentes Serif tienen una pequeña línea o trazo al final de un trazo más grande en cada carácter, las fuentes sans-serif no.) Habiendo tomado esa decisión, sus opciones eran muy limitadas.
Pero ahora, el mundo es una maravilla.
Aquí hay algunos consejos para ayudarle a elegir la mejor fuente para su sitio:
- Mire sus materiales impresos. ¿Hay fuentes que ya se están utilizando y que se pueden encontrar como fuentes web? Si no, ¿puede encontrar algo similar?
- Mire los sitios web de sus competidores. ¿Qué tipo de fuentes están usando? No le recomiendo que los copie, pero puede haber ciertos estilos que transmiten el tipo correcto de imagen a los usuarios de su sitio web.
- Piense en el tipo de estado de ánimo que quiere transmitir con sus fuentes. Algunas fuentes parecen más modernas, otras más tradicionales. Algunos son divertidos, otros más serios.
- Limítese a las fuentes que son fáciles de leer para el texto del cuerpo, y utilice fuentes más interesantes para los titulares si lo desea.
- Elija entre las fuentes más populares de Google, que serán familiares para los visitantes del sitio web y fáciles de leer.
Una vez que haya elegido sus fuentes, dedique algún tiempo a experimentar con ellas. Los proveedores de fuentes como Google Fonts le permiten escribir texto personalizado para ver cómo se ve en la fuente elegida. Una vez que vea su propio texto en la fuente, podría ayudarte a decidir si es la fuente adecuada para usted.
Y recuerde, el uso de fuentes web hace que sea muy fácil cambiar las fuentes para que siempre pueda cambiar a otra opción mientras desarrolla su tema o configura su sitio.
¿Cómo añadir fuentes web con un plugin de WordPress?
Así que ya tiene elegida la fuente, ahora es el momento de añadirla a su sitio.
Si no se siente cómodo añadiendo código a sus archivos de temas, puede instalar un complemento que le permitirá acceder a las fuentes de Google y utilizar la fuente que desees en su sitio.
El complemento de tipografía de Google Fonts le da acceso a toda la biblioteca de fuentes de Google y le permite revisarlas a través del Personalizador de WordPress.
Instale el plugin en su sitio como lo haría con cualquier otro plugin, y luego actívelo.
Vaya a Apariencia > Personalizar para acceder al Personalizador. Verás una sección para Google Fonts.
Haga clic en ese enlace para acceder a la configuración de sus fuentes. Configúrelos de la siguiente manera:
Configuración básica: configure la fuente predeterminada para el texto del cuerpo y los encabezados, así como los botones. En la captura de pantalla de abajo puede ver que he añadido una fuente con gracias fácil de leer para el cuerpo y una fuente más distintiva para los encabezados.
Configuración avanzada: Aquí puede configurar la marca (título y descripción del sitio), la navegación (su menú), el contenido y los encabezados con más detalle, la barra lateral y el pie de página. También puede cargar fuentes sin asignarlas a nada, lo que significa que puede agregarlas a cualquier CSS personalizado en el Personalizador.
Carga de fuentes: Si hay pesos de fuentes que no necesita (por ejemplo, negrita, cursiva, etc.), puede desmarcarlos aquí para que no ralenticen innecesariamente su sitio.
Depuración: Utilice esta opción para forzar la visualización de las fuentes si no funcionan como deberían.
Dedique algún tiempo a trabajar con estas configuraciones y a probarlas en el Personalizador para asegurarse de que funcionan como usted desea. A continuación, cuando esté satisfecho con la configuración, haga clic en el botón Publicar. No abandone el Personalizador sin hacer clic en Publicar o perderá los cambios.
Edición de los colores de las fuentes
La versión gratuita del plugin no le permite editar los colores de sus fuentes. Para ello, tendrá que comprar la versión premium o usar la opción CSS adicional en el Personalizador.
Vuelva a la pantalla de inicio del Personalizador y haga clic en la pestaña CSS adicional. Se le presentará un área de texto vacía donde podrá agregar su propio CSS.
Para encontrar el elemento que necesita estilizar, selecciónelo y utilice el inspector de código de su navegador para averiguar qué color tiene el estilo que ya tiene.
Abajo estoy usando Google Chrome y he apuntado a un elemento h1.
En mi tema de WordPress, ha heredado su color del elemento cuerpo. Quiero añadir algo más específico. En el área de texto de su CSS, escriba el CSS de su elemento y el color que desea utilizar. El mío se parece a éste:
h1 {
color: #f542f5;
}Eso me da un elemento H1 rosa brillante:
Puede repetir esto con cualquier elemento de texto al que desee agregarle color, y también con cualquier fuente personalizada que no estuviera incluida en las opciones de las otras pantallas. Si quieres saber qué CSS usar para las fuentes, sigua leyendo la sección de esta entrada sobre cómo modificar tus fuentes a través de CSS.
¿Cómo añadir fuentes web manualmente?
Si no desea añadir un plugin adicional a su sitio y tener acceso al código de su tema, puede instalar y utilizar fuentes web añadiendo código al archivo de funciones y a su hoja de estilos.
Si su sitio está usando un tema a medida que puede editar, entonces puede editar el archivo de funciones y la hoja de estilo de su tema. Pero si está usando un tema de terceros que compró o obtuvo del directorio de temas de WordPress, tendrá que crear un tema hijo. Luego tendrá que darle dos archivos: functions.php y style.css.
Vamos a trabajar en el proceso de agregar manualmente fuentes web a su tema. Voy a trabajar con fuentes de Google para este ejemplo, ya que es el más utilizado y es gratuito.
Escoger una fuente y agarrar el enlace
Empiece elegir tu fuente de Google Fonts. Añádalo a su biblioteca haciendo clic en el icono más al lado.
Haga clic en la pestaña en la parte inferior de la pantalla para su biblioteca y verá algún código para que lo agregue a su sitio. Si desea agregar pesos y estilos de fuente adicionales, haga clic en la ficha Personalizar y seleccione los que desee. A continuación, vuelva a la pestaña Incrustar.
No copie el código exactamente: lo usará, pero en lugar de llamar a la fuente en la sección < head> del encabezado de su sitio, estará haciendo cola en las fuentes. Esta es la forma correcta de hacerlo en WordPress.
En su lugar, desde la sección Incrustar fuente, copie sólo el enlace a la fuente.
Así que, en mi caso, Google Fonts me está dando este código:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">Sólo necesita copiar esta parte:
https://fonts.googleapis.com/css?family=RalewayEncolado de la(s) fuente(s)
Abra el archivo de funciones del tema y añada lo siguiente, sustituyendo el enlace de mi fuente por el enlace que Google le ha proporcionado para la suya:
function kinsta_add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );Esto pone en cola el estilo de los servidores de Google Fonts. Si necesita añadir más fuentes en el futuro, puede añadir una nueva línea a su función o añadirla en la misma línea, así:
function kinsta_add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );Esto encolará las fuentes Merriweather y Raleway.
Adición de las fuentes a la hoja de estilo
Esto no hará que la fuente funcione en su sitio todavía: todavía necesita agregarla a la hoja de estilo de su tema.
Abra el archivo style.css en su tema y añada el código para estilizar elementos individuales con sus fuentes web. Asegúrese de agregarlo después de cualquier CSS existente para fuentes, o puede ser anulado por eso.
Los elementos que estilice dependerán de usted, pero es común usar una fuente legible para el elemento del cuerpo y algo más elegante para los encabezados.
body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3 {
font-family: 'Merriweather', serif;
}En el caso anterior, todo en la página usará la fuente Raleway, excepto los elementos h1, h2 y h3, que usarán Merriweather.
Ahora, guarde su hoja de estilo y revise su sitio para asegurarse de que todo funciona como usted espera. Si las nuevas fuentes no se muestran, intente vaciar la caché del navegador y compruebe que las fuentes no están siendo sustituidas por ningún estilo para las fuentes de la parte inferior de la hoja de estilos. Esta es la razón por la que es una buena idea añadir su nuevo estilo en la parte inferior de la hoja de estilo o reemplazar el estilo de fuente existente con su nuevo estilo (incluso mejor).
Adición de una fuente de copia de seguridad
Puede haber ocasiones en las que alguien visite su sitio y no pueda acceder a los archivos de fuentes web por alguna razón. Tal vez están en una mala conexión o usando un viejo dispositivo que no renderiza las fuentes web. O tal vez su proveedor de fuentes web está teniendo problemas técnicos.
Por esta razón, es una buena idea tener una copia de seguridad.
El código que le dan las fuentes de Google ya tiene una copia de seguridad de simplemente especificar serif or sans-serif, pero podemos ir un paso más allá.
Utilice una de las fuentes preparadas para la Web que ya estarán instaladas en el equipo de su visitante y, a continuación, incluya la segunda opción de serif or sans-serif, en caso de que estén utilizando un dispositivo móvil que ni siquiera tenga las fuentes preparadas para la Web.
Vuelva a su hoja de estilo y edite su CSS para que lea algo como esto:
body {
font-family: 'Raleway', Helvetica, sans-serif;
}
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
}Esto significa que las personas que visiten su sitio web verán sus fuentes web si todo va bien; pero si no es así, verán Helvetica o Georgia, o en su defecto, verán cualquier tipo de fuentes serif y sans-serif que su navegador sea capaz de cargar.
Alojamiento de sus propias fuentes en WordPress
Algunos desarrolladores prefieren no utilizar fuentes web, sino alojar las fuentes en sus propios servidores y usted podría ser uno de ellos.
Esto podría deberse a una o más de las siguientes razones, entre ellas la seguridad, la ejecución o el presupuesto.
Si le preocupa el rendimiento, puede optimizar el rendimiento de sus fuentes web de varias maneras, que se tratan más adelante en este artículo. Pero si usted ha decidido seguir la ruta local, necesitará saber cómo hacerlo.
¿Por qué alojar sus propias fuentes?
El uso de fuentes web es a menudo más fácil y puede darle más flexibilidad, además de ocupar menos espacio en su servidor. Pero eso no significa que no haya ocasiones en las que las fuentes de alojamiento local puedan no ser más apropiadas.
Entre las razones por las que puede querer alojar fuentes localmente se incluyen:
Es posible que descubra que puede sortear algunos de estos problemas
- Es posible que prefiera no utilizar recursos de proveedores externos por razones de seguridad, sabiendo que la seguridad de su propio sitio web está controlada por usted.
- Es posible que descubra que el uso de un servicio de terceros repercute en el rendimiento de su sitio.
- Puede que hayas comprado un archivo de fuente y quieras usarlo. Asegúrese de que su licencia incluya el uso del sitio web, así como el uso en materiales impresos.
- Su sitio puede estar alojado localmente, por ejemplo en una intranet, y los usuarios no tendrán acceso a fuentes web cuando lo estén utilizando.
¿Dónde encontrar fuentes que puede alojar localmente?
Muchas fuentes web también se pueden descargar para su uso como fuentes alojadas localmente, pero tendrá que comprobar que la licencia lo permite. En el caso de las fuentes de Google, está permitido.
También encontrarás que hay fuentes que no están disponibles como fuentes web y que puede descargar y alojar usted mismo. Cualquier archivo de fuente que usted puede descargar a su computadora también puede ser cargado a su sitio web y almacenado allí. Si necesita utilizar una fuente que no está disponible como fuente web para enlazar con su marca, ésta será la solución, pero asegúrese de que su licencia lo permita.
¿Cómo agregar fuentes alojadas localmente a su sitio de WordPress?
Así que sabe que quiere alojar sus fuentes localmente, ¿cómo lo hace?
El proceso es diferente del uso de fuentes web. Usted tiene que subir los archivos de fuentes a su sitio y enlazarlos en su hoja de estilo sin tener que hacer cola en su archivo de funciones.
Descargar y convertir las fuentes
Empiece por descargar las fuentes que desea utilizar. En Google Fonts, puedes hacerlo haciendo clic en el icono de descarga cuando veas la fuente en tu biblioteca.
Descomprima el archivo de fuente en su computadora y elimine cualquier peso de fuente que no necesite usar en su sitio: no tiene sentido subir archivos que no vaya a usar.
Para usar en su sitio web, los archivos deberán estar en el formato…. woff. Si no lo son (no lo serán si los obtuvo de fuentes de Google), puede usar un servicio como Convertio para convertirlos.
Suba las fuentes a su tema
Ahora suba los archivos de fuente a su tema, en wp-content/themes/themename, donde themename es la carpeta para su tema. Es una buena idea poner cualquier archivo de fuente en su propia carpeta en el tema, por ejemplo, una carpeta de fuentes.
Si está trabajando con un tema de terceros, cree un tema hijo para sus archivos de fuente y su hoja de estilo.
Una vez que lo hayas hecho, necesitarás añadir la fuente a tu hoja de estilo.
Agregar las fuentes en CSS
Abra la hoja de estilo de su tema.
Añada código como este, reemplazando las fuentes que he usado por las suyas:
@font-face {
font-family: 'Raleway';
src: url( "fonts/Raleway-Medium.ttf") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url( "fonts/Raleway-Bold.ttf") format('woff'); /* medium */
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Merriweather';
src: url( "fonts/Merriweather.ttf") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}Añada lo que necesite. Tenga en cuenta que si desea utilizar las variaciones de negrita, cursiva, etc. de su fuente, necesita declarar cada una usando @fontface y luego especificar el peso o estilo para cada una, como he hecho anteriormente con Raleway para los pesos en negrita y normal.
Ahora añada el estilo para sus elementos, como lo haría cuando usa fuentes web:
body {
font-family: 'Raleway', Helvetica, sans-serif;
src: url( "/fonts/Raleway-Medium.ttf" );
}
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
}Las fuentes alojadas localmente ahora funcionarán con el tema.
¿Cómo cambiar las fuentes en WordPress?
Ahora usted sabe cómo instalar fuentes en su sitio de WordPress de una de estas dos maneras. ¿Qué tal si los edita? ¿Qué tal si los cambiamos?
Puede editar sus fuentes de una de estas tres maneras: a través del Personalizador, en la pantalla de edición de mensajes o páginas, o utilizando CSS.
Veamos cada una de esas opciones para cambiar el estilo, el color y el tamaño de la fuente.
¿Cómo cambiar los estilos de fuente en WordPress?
Veamos cómo podemos hacerlo si está usando el Editor de bloques o el Editor clásico.
Cambio de estilos de fuente en el editor de bloques (Gutenberg)
Si está usando una versión reciente de WordPress con el editor de Gutenberg, puede cambiar el estilo de su texto cuando lo edite en su mensaje o página.
Seleccione el bloque que quiera editar y aparecerá un menú de estilo encima de él.
Seleccione el texto que desea editar y luego haga clic en los iconos para ponerlo en negrita o cursiva. Si hace clic en la flecha que aparece junto a ellas, verá que también puede seleccionar tachado.
Cambio de estilos de fuente en el editor clásico
Si está ejecutando una versión anterior de WordPress o tiene instalado el plugin Classic Editor, también puede editar estilos de fuente. (Si no quiere el editor de Gutenberg, es mejor actualizar WordPress y desactivar Gutenberg.)
El Editor Clásico incluye una barra de herramientas encima del panel de edición principal donde puede cambiar los estilos de su texto. Si hace clic en el icono de la barra de herramientas Alternar a su derecha, puede acceder a más opciones, incluyendo tachar.
Modificación de estilos de fuente en el Customizing
Si desea cambiar el estilo de fuente para un elemento específico, puede hacerlo añadiendo CSS manual al Personalizador.
Abra el Personalizador y haga clic en CSS Adicional. Esto abrirá una pantalla donde podrá escribir CSS.
Ahora puede escribir el CSS de sus fuentes en el cuadro. Por lo tanto, si desea cambiar todos los elementos h1 y h2 a cursiva, debe añadir esta CSS:
h1, h2 {
font-style: italics;
}Cambio de estilos de fuente en la hoja de estilo
Si se sientes cómodo añadiendo código a su hoja de estilo, esta es una mejor manera de hacerlo.
Si utiliza un tema de terceros, cree un tema hijo para su propio estilo; de lo contrario, los cambios que realice se perderán al actualizar el tema. Tendrás que crear una hoja de estilo en el tema hijo para decirle a WordPress que es un tema hijo: ahí es donde pones tu nuevo estilo de fuente.
Si está usando su propio tema, puede editar y corregir el CSS en su propia hoja de estilo. El archivo es style.css y lo encontrarás en tu carpeta de temas en wp-content/themes.
Agregue cualquier estilo de fuente al final de su hoja de estilo para que no se cancele por nada que ya exista. O mejor aún, elimine y sobrescriba cualquier estilo de fuente existente, a menos que desee conservarlo.
Cambiar el peso de un elemento con font-weight:
span.featured {
font-weight = bold;
}Cambiar el estilo de un elemento con font-style:
span.featured {
font-style = italic;
}Cambie la alineación con text-alignment:
span.featured {
text-alignment: center;
}¿Cómo cambiar los colores de las fuentes en WordPress?
Otro cambio que usted podría querer hacer es cambiar el color de cierto texto en su sitio. Tenga cuidado de no exagerar con esto: su tema ha sido diseñado con colores que funcionan bien juntos y si añades demasiados colores, podría parecer chillón y poco profesional.
Cambiar el color de las fuentes en Gutenberg
Los bloques de texto de Gutenberg le permiten editar el color y el fondo del texto. Para ello, abra el bloque que desea modificar y haga clic en la ficha Configuración de color en la sección Bloque a la derecha de la pantalla.
Desde aquí puede editar el color de fondo y el color del texto para los bloques de texto.
Tenga en cuenta que WordPress le avisará si la combinación de colores que utilice será perjudicial para la accesibilidad, como en el ejemplo que he utilizado anteriormente. Evite la tentación de exagerar con sus colores – después de todo usted eligió su tema porque su diseño de color era apropiado para su sitio, y añadir muchos más colores podría hacer que se vea chillón.
Si hace clic en la pestaña Avanzado debajo de la pestaña Configuración de color, también puede agregar una clase a ese bloque, que luego puede cambiar de estilo en el Personalizador o en su hoja de estilo. Así que, por ejemplo, si ha añadido una clase de .featured su bloque, puede darle estilo usando esa clase.
Cambio de los colores de las fuentes en el editor clásico
La barra de herramientas del editor clásico le permite cambiar el color del texto que seleccione. Así que puede seleccionar una palabra individual y cambiar su color. Abajo he hecho una frase roja.
Aunque esto, en teoría, le da mucha flexibilidad, tenga cuidado con el uso excesivo. Si empieza a añadir muchos más colores a su texto, podría resultar en un sitio que es difícil de leer y malo para la accesibilidad.
Modificación de los colores de las fuentes en el personalizador
Si su tema incluye opciones para cambiar el esquema de color de su sitio, este es el mejor lugar para hacerlo.
Por ejemplo, en el sitio de abajo estoy usando un tema que me permite elegir una nueva combinación de colores para todo el tema. Esto ayuda a asegurar que los nuevos colores trabajen bien juntos y sean coherentes.
Las opciones para esto variarán de acuerdo a su tema – algunos temas le permiten apuntar a encabezados, enlaces y otros elementos y cambiar su color.
Si desea apuntar a elementos específicos para cambiar su color pero no es una opción del tema, puede agregar CSS en el Personalizador para hacerlo.
Seleccione Personalizar > CSS adicional y escriba su CSS en el cuadro de texto.
Por ejemplo, si desea cambiar el color de sus encabezados h1, escriba esto:
h1 {
color: #564534;
}Si eso no funciona, es posible que necesite agregar CSS más específicas. En mi tema, el color del enlace de encabezado del sitio está codificado usando el #site-title ID, así que necesito añadir este CSS:
#site-title a {
color: #564534;
}
Reemplace el color que he usado arriba con su propio color.
Cuando estés satisfecho con los cambios, haz clic en el botón Publicar.
Cambio de los colores de las fuentes en la hoja de estilo
Al igual que con los estilos de fuente, también puede editar la hoja de estilo de su tema (o crear un tema hijo) para cambiar los colores de fuente.
Cambie el color con el color. Abajo estoy cambiando el color principal para el texto de mi sitio, usando el body element:
body {
color = #222222;
}Asegúrese de que anula cualquier estilo existente para los mismos elementos y que también estiliza los elementos que heredan ese estilo si desea que tengan un color diferente. Todo el texto heredará el color del elemento del cuerpo a menos que tenga su propio estilo.
Cambiar el tamaño de las fuentes en WordPress
Por razones de accesibilidad, puede decidir que desea que las fuentes sean más grandes de lo que son por defecto en el tema. O puede decidir que los encabezados de sus áreas de widgets son demasiado pequeños, por ejemplo.
Cambiar el tamaño de fuente en Gutenberg
Con el editor de Gutenberg, puede cambiar el tamaño del texto dentro de cada bloque.
Seleccione el bloque y luego haga clic en la pestaña Configuración de texto en el menú Bloques a la derecha de la pantalla. Puede hacer que el texto del bloque sea más pequeño o más grande, como se muestra a continuación.
Tenga cuidado con hacer esto demasiado: si todos los párrafos de su página son de diferentes tamaños, se verá desarticulado y será difícil de leer.
Cambio del tamaño de fuente en el editor clásico
El editor clásico no le da la opción de seleccionar un texto específico y cambiar su tamaño: así que si necesita esta función, tendrá que actualizarse a Gutenberg. Lo siento!
Modificación del tamaño de fuente en el Customizing
Dependiendo del tema, es posible que tenga la opción de cambiar los tamaños de fuente en el Personalizador, ya sea cambiando el tamaño de fuente para todo el sitio o dirigiéndose a las cabeceras y al texto del cuerpo.
Si el tema no incluye una opción de Personalizador para cambiar los tamaños de fuente, pero puede usar la opción CSS adicional. Vaya a Personalizar > CSS adicional y escriba el CSS en el cuadro.
Abajo estoy haciendo los encabezados en las áreas de widgets más grandes, con este CSS:
h2.widget-title {
font-size: 3em;
}
Quizá sea demasiado grande, pero te da una idea general.
Cambio del tamaño de fuente en la hoja de estilo
Cambiar el tamaño de las fuentes en su hoja de estilo funciona de manera similar a cambiar cualquier otro estilo para sus fuentes.
Si desea cambiar el tamaño de todo el texto de su sitio, debe utilizar el elemento body element:
body {
font-size: 14px;
}Para el elemento del body se utilizan píxeles, pero para otros elementos se utiliza em el tamaño es relativo al tamaño del elemento del body.
h1,
#site-title {
font-size: 2em;
}Recuerde que si va a hacer cambios en las fuentes de la hoja de estilo de su tema, pruébela primero en un sitio de desarrollo o de preparación para que no corra el riesgo de arruinar su sitio en vivo.
¿Cómo optimizar las fuentes en WordPress?
Tanto si utiliza fuentes web como si utiliza fuentes alojadas localmente, tiene sentido hacer todo lo posible para optimizar sus fuentes.
Aquí le daré algunos consejos para optimizar sus fuentes, tanto en velocidad como en diseño.
Optimización de fuentes para el rendimiento
Si está utilizando fuentes web en su sitio, deberá hacer todo lo que esté en su mano para garantizar que lleguen a sus páginas lo más rápido posible y que el hecho de que estén alojadas en otro lugar no ralentice las cosas.
- Utilice el almacenamiento en caché para asegurarse de que las páginas no tengan que ser reconstruidas cada vez que se cargan. Los planes de hospedaje de Kinsta vienen con almacenamiento en caché incorporado.
- Utilice un proveedor de fuentes web que suministre fuentes mediante una red de entrega de contenido o CDN. Google Fonts lo hace y acelera la entrega de las fuentes.
- Utilice únicamente las fuentes que necesite. No encolar las variaciones de las fuentes (pesos, estilos) que no va a utilizar en su hoja de estilo. Si usted encuentra que los necesita en una fecha posterior, siempre puede agregarlos entonces.
- Si utiliza fuentes web, asegúrese de colocarlas en cola correctamente. No utilice una línea @import en su hoja de estilo, incluso si esto es lo que su proveedor de fuentes web le dice que haga.
- Cuando agregue CSS manualmente, añádalo a la hoja de estilo de su tema y no a la sección < head> de su archivo header.php. Esta es una de las razones por las que es mejor codificar el CSS manualmente en su tema en lugar de usar el Personalizador o un bloque, ya que ambos añadirán CSS en línea a la página en lugar de añadirlo a la hoja de estilo.
- Considere la posibilidad de utilizar la línea de CSS para reducir unos milisegundos más el tiempo de carga de la página. Este es un proceso que utiliza codificación base64 para añadir CSS desde su hoja de estilo a la página antes de cargarla, ahorrando al navegador la necesidad de cargar archivos adicionales. Puede parecer contraintuitivo dado el consejo anterior sobre no escribir CSS en línea, pero todavía funciona desde un archivo CSS separado y no significa codificar manualmente CSS en línea. Si está cargando varias fuentes, el inline puede acelerar un poco su sitio.
- Use la minificación para reducir el tamaño de su hoja de estilo. Si eres cliente de Kinsta, otra opción a tener en cuenta es la función de minificación de código incorporada, a la que puedes acceder directamente desde el panel de control de MyKinsta. Esta función permite a los clientes habilitar rápida y fácilmente la minificación automática de CSS y JavaScript con un solo clic. Esto puede acelerar eficazmente tu sitio sin ningún esfuerzo manual.
- Si hospeda fuentes de forma local, cargue sólo los archivos de las fuentes y los pesos y estilos de fuente que necesite. Sólo añada las variaciones que necesite utilizando la declaración @font-face.
- Considere la posibilidad de utilizar una CDN para alojar sus propias fuentes en lugar de alojarlas en su propio servidor.
- Cuando aloje sus propias fuentes, incluya formatos adicionales: woff2, woff, ttf y eot. Los navegadores pueden entonces seleccionar la versión que va a cargar más rápido.
- Si utiliza una fuente diferente para el título de su sitio, coloque en cola sólo los caracteres que necesita en lugar de toda la biblioteca de fuentes.
Así que si el título de su sitio es Kinsta, podría hacer una pequeña mejora en el rendimiento al seguir la hoja de estilo de esta manera:
function kinsta_add_title_font() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway&text="kinsta');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );Optimización de fuentes para el diseño
Además de optimizar el rendimiento de sus fuentes, también tiene sentido asegurarse de que estén optimizadas visualmente: que encajen bien con el diseño de su sitio y con sus materiales fuera de línea.
Esto es especialmente cierto si utiliza un plugin o un tema hijo para añadir fuentes adicionales a las que ya se incluyen en el tema. Existe el riesgo de que su tema se vea desordenado si hay demasiadas fuentes en demasiados colores y estilos.
Antes de agregar fuentes adicionales a su sitio, considere lo siguiente:
- ¿Son las nuevas fuentes coherentes con las existentes? ¿Transmiten un estilo o estado de ánimo similar?
- Si necesita coincidir con una fuente que se ha utilizado para materiales de impresión pero que no puede utilizar la misma fuente que una fuente web, intente encontrar una coincidencia lo más parecida posible en Google Fonts.
- ¿Son las fuentes que ha elegido coherentes con su marca? Si tiene un negocio serio, no quiere usar Comic Sans (de hecho, sea cual sea el tipo de sitio web que tengas, no quieres usar Comic Sans).
- Si está cambiando los colores de sus fuentes, intente usar colores que ya están en el diseño de su tema o que coordinan con ellos. Agregar demasiados colores hará que su sitio se vea chillón y poco profesional.
- Si está intentando elegir un par de fuentes en Google Fonts, intente utilizar un servicio como fontpair para encontrar dos que funcionen bien juntos.
Las fuentes que usted utiliza en su diseño tendrán un impacto en la impresión que los visitantes obtienen cuando llegan a su sitio. Asegúrese de haber considerado esto y elegido fuentes que refuercen su marca.
Trabajar con fuentes variables
Las fuentes variables son un nuevo tipo de fuentes que hacen que añadir más fuentes a su sitio sea más eficiente.
Permiten almacenar más información en un archivo de fuente, de modo que si desea variaciones en su fuente (negrita, cursiva, etc.), no tiene que cargar varios archivos de fuente, sino que sólo puede cargar uno.
Para una fuente con múltiples pesos de fuente, estilos e inclinaciones, esto podría ahorrar mucho espacio de archivo y hacer más fácil el proceso de encolar la fuente o añadirla a través de @fontface.
Las fuentes variables son compatibles con las últimas versiones de Chrome, Edge, Firefox y Safari, pero no con los navegadores más antiguos; por lo tanto, si las utilizas, necesitarás una copia de seguridad. Y aún no hay muchas fuentes variables disponibles. Las fuentes de Google no incluyen ninguna, pero Google es compatible con la especificación, por lo que es probable que se añadan con el tiempo.
Los desarrolladores de fuentes están trabajando para crear más fuentes variables y mejorar su confiabilidad, por lo que vale la pena observar el progreso para que pueda utilizar fuentes variables para optimizar sus fuentes una vez que se vuelvan más estables.
Resumen
Cambiar las fuentes en su sitio de WordPress no es una tarea sencilla. Usted tiene diferentes posibilidades para elegir:
- Uso de fuentes web mediante la instalación de un plugin.
- Usar fuentes web codificándolas en el tema y encolándolas.
- Alojamiento de sus fuentes.
A continuación, debe centrarse en cómo optimizar sus fuentes para obtener un mejor rendimiento. Si sigue los consejos de esta guía, no sólo podrá cambiar las fuentes en WordPress, sino que también podrás tener más control sobre ellas en su tema.
¿Quieres despejar el diseño de tu página o blog para que tus lectores se centren en tu contenido? Entonces, echa un vistazo a esto: ¿Cómo quitar la barra lateral en WordPress? (4 Métodos).
Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.
Deja una respuesta